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 小时前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·javascript·vue.js
江城开朗的豌豆2 小时前
Vue的'读心术':它怎么知道数据偷偷变了?
前端·javascript·vue.js
江城开朗的豌豆2 小时前
手把手教你造一个自己的v-model:原来双向绑定这么简单!
前端·javascript·vue.js
我在北京coding2 小时前
el-tree 懒加载 loadNode
前端·vue.js·elementui
江城开朗的豌豆2 小时前
v-for中key值的作用:为什么我总被要求加这个'没用的'属性?
前端·javascript·vue.js
markyankee1016 小时前
Vue 组件系统深度解析
vue.js
bitbitDown6 小时前
从一个Bug到Vue核心原理:聊聊模板作用域的那些事
前端·javascript·vue.js
_advance6 小时前
Vue2 Mixin 深入分析
前端·vue.js
萌新小码农‍7 小时前
Vue集成MarkDown
前端·javascript·vue.js
TE-茶叶蛋19 小时前
Flutter、Vue 3 和 React 在 UI 布局比较
vue.js·flutter·react.js