vue权限管理——请求和响应权限控制

1.请求头中设置token

每次请求请求头都携带token,没有token或者token失效后端会返回错误

javascript 复制代码
axios.interceptors.request.use(configs => {
    let token = sessionStorage.getItem("token");
    if (token) {
        configs.headers.authorization = token;
    }
}

2.拒绝非权限请求

防止一些在浏览器上强制将按钮改成可用(如将disabled改为true就可用),然后发起请求后发送后端

javascript 复制代码
const actionMapping = {
    'get': 'view',
    'post': 'add',
    'put': 'edit',
    'delete': 'delete',
}
const whiteList = ['/login','/user/login','/user/me', '/', '/404']

// 对请求头进行处理(token)
axios.interceptors.request.use(configs => {
    let token = sessionStorage.getItem("token");
    if (token) {
        configs.headers.authorization = token;
    }

    // 拒绝非权限请求
    if (!whiteList.includes(configs.url)) {
        let metaRights = router.currentRoute.value.meta.rights;
        let action = actionMapping[configs.method];

        if (!metaRights.includes(action)) {
            ElMessage.error("没有操作权限");
            return Promise.reject(new Error('没有操作权限'))
        }
    }

    return configs;
});

3.响应拦截

响应控制:请求返回401,token无效或者后期,则需要跳转到登录界面

javascript 复制代码
// 处理返回数据
axios.interceptors.response.use(response => {
    return response;
}, error => {
    let { status, data } = error.response;
    let { message, errorDetail } = error.response.data;
....
   if (status === 401 || status === 402 || status === 403) {
        // 没有权限,需要重新登录
        ElMessage.error("token失效或无权限,正跳转登录页面......");
        sessionStorage.clear();
        return router.push("/login");
    }
....
}
相关推荐
麦麦大数据2 小时前
F038 vue+flask 微博舆情热搜情感分析大数据分析系统|前后端分离架构
vue.js·架构·flask·情感分析·微博·舆情分析
qq_339191142 小时前
vue3 npm run dev局域网可以访问,vue启动设置局域网访问,
前端·vue.js·npm
橙某人4 小时前
Vue3 + Pinia 移动端Web应用:页面缓存策略解决方案💡
前端·javascript·vue.js
冲刺逆向5 小时前
【js逆向案例二】瑞数6 深圳大学某医院
前端·javascript·vue.js
西木之斤5 小时前
vue和react实例简单对比
vue.js·react.js
慧一居士6 小时前
Vue 中 <keep-alive> 功能介绍,使用场景,完整使用示例演示
前端·vue.js
晴殇i6 小时前
解锁Web Workers:解决90%前端性能瓶颈的利器
前端·javascript·vue.js
Sheldon一蓑烟雨任平生7 小时前
Vue3 透传 Attributes
vue.js·vue3·透传attributes·禁用attributes继承·深层组件继承
慧一居士7 小时前
在Vue项目中平滑地引入HTML文件
前端·vue.js
小白学过的代码8 小时前
videojs增加视频源选择框小工具
javascript·vue.js·音视频