前端权限控制的好处
- 降低非法操作的可能性
- 减少不必要的请求,减轻服务器的压力
- 提高用户的体验
权限管理要点
- 菜单:登录后接口返回权限数据,展示对应的菜单
- 页面:防止用户手动修改地址栏,未登录跳转登陆页面,没有权限跳转404
- 按钮:根据后端返回的权限数据是否展示对应权限操作的按钮
- 请求与响应:防止用户非常规操作,比如使用调试工具启用禁用的按钮发送的请求
实现
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站的这个视频,讲的很通透!