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");
    }
....
}
相关推荐
一个处女座的程序猿O(∩_∩)O1 小时前
vue3 如何使用 mounted
前端·javascript·vue.js
迷糊的『迷』1 小时前
vue-axios+springboot实现文件流下载
vue.js·spring boot
web135085886351 小时前
uniapp小程序使用webview 嵌套 vue 项目
vue.js·小程序·uni-app
陈大爷(有低保)1 小时前
uniapp小案例---趣味打字坤
前端·javascript·vue.js
cronaldo912 小时前
研发效能DevOps: Vite 使用 Element Plus
vue.js·vue·devops
百罹鸟2 小时前
【vue高频面试题—场景篇】:实现一个实时更新的倒计时组件,如何确保倒计时在页面切换时能够正常暂停和恢复?
vue.js·后端·面试
编程百晓君4 小时前
一文解释清楚OpenHarmony面向全场景的分布式操作系统
vue.js
暴富的Tdy4 小时前
【CryptoJS库AES加密】
前端·javascript·vue.js
neeef_se4 小时前
Vue中使用a标签下载静态资源文件(比如excel、pdf等),纯前端操作
前端·vue.js·excel
z千鑫4 小时前
【前端】入门指南:Vue中使用Node.js进行数据库CRUD操作的详细步骤
前端·vue.js·node.js