前端权限管理

前端权限控制的好处

1. 降低非法操作的可能性
2. 减少不必要的请求，减轻服务器的压力
3. 提高用户的体验

权限管理要点

1. 菜单：登录后接口返回权限数据，展示对应的菜单
2. 页面：防止用户手动修改地址栏，未登录跳转登陆页面，没有权限跳转404
3. 按钮：根据后端返回的权限数据是否展示对应权限操作的按钮
4. 请求与响应：防止用户非常规操作，比如使用调试工具启用禁用的按钮发送的请求

实现

1. 菜单

在登陆请求中获取后端返回的权限数据，

2. 界面视图

登录成功后将token储存在本地，判断是否登录，借助路由拦截完成

router.beforeEach((to, from, next)=>{
    if(to.path == '/login'){
        next() // 如果是登录页面则放行
    } else {
    const token = localStotage.getItem('token');
    if(!token){
        next('/login')
    } else {
        next() // 没登录就跳转到登录页面
    }
})

动态路由

根据当前用户拥有的权限动态添加路由

3. 按钮

通过自定义指令实现按钮的隐藏或禁用

4. 请求与响应

请求控制，除了登录请求，其他请求都带上token

axios.interceptors.request.use((req)=>{
    const url = req.url;
    if(url !== '/login'){
        req.header.Authorization = localStorage.getItem('token');
    } 
    return req; // 需要将req返回，不然请求发不出去
}

非权限内的请求，通过axios拦截器拦截

import axios from 'axios';
import Vue from 'vue';
import router from './router.js';

axios.defaults.baseURL = 'https://www.xxx.com' // 配置请求的基础路径

const actionMap = { // 请求方式与权限的映射
    get: 'view', // 查看
    post: 'add', // 添加
    put: 'edit', // 编辑
    delete: 'delete' // 删除
};

axios.interceptors.request.use((req)=>{
    const url = req.url; // 获取请求地址
    if(url !== '/login'){
        req.header.Authorization = localStorage.getItem('token');
    }
    const method = req.method; // 获取请求方式
    const action = actionMap[method]; // 获取对应的权限
    const auth = router.currentRoute.meta; // 获取路由元信息中的权限数据
    if(auth && auth.indexOf(action)==-1){ // 判断是否拥有权限
        this.$alert('没有权限！')
    }
    return req；
})
    

响应控制，token过期时自动跳转登录页面

axios.interceptors.responce.use((res)=>{
    if(res.code == 401){ // 当token失效时，返回状态码401
        this.$router.push('/login'); // 跳转到登录页面
        localStorage.clear(); // 清楚本地的登录信息
        window.location.reload(); // 刷新页面来清除vuex中的用户数据
    }
    return res;
})

有时间的话推荐看一下B站的这个视频，讲的很通透！

🔗B站链接