前端权限的意义
前端权限控制思路
代码修改:
修改aside.vue 代码
此时左侧已经显示出来菜单了,但是面临一个问题是:
刷新页面菜单栏消失
解决办法:将data 保存在 SessonStorage 中
只需要按如下方式修改代码
退出按钮逻辑
路由导航守卫:
动态路由的添加
router index.js
定义路由映射
按钮的控制
创建 permiss.js 引入到 main,js 入口文件中
按钮添加类似的权限
请求和相应的权限控制
登录请求携带 token
如果发生了非权限内的请求,应该在前端范围内阻止,虽然这个访问发送到服务器也会被拒绝
响应拦截:
整体 axios js 文件
import Axios from 'axios'
import Vue from 'vue'
import router from '@/router'
// 权限控制——请求拦截
const actionMapping = {
'get':'view',
'post':'add',
'put':'edit',
'delete':'delete'
}
Axios.interceptors.request.use((req=>{
// console.log(req.url)
// console.log(req.method)
const action = actionMapping[req.method]
// 如果请求的不是login 需要在请求头添加token
if(req.url!='/login') {
req.headers.Authorization = sessionStorage.getItem('token')
// 判断非权限范围内的请求
const currentRight = router.currentRoute.mata
if(currentRight && currentRight.indexOf(action)==-1) {
// 没有权限
alert('没有权限')
return Promise.reject(new Error('没有权限'))
}
// 判断当前请求的行为
//restfull 风格请求
//get 请求 view
//post 请求 add
//put 请求 edit
// delete 请求 delete
}
return req
}))
// 响应拦截 状态码为401 强制跳转到登录页面
Axios.interceptors.response.use(res=>{
if(res.data.meta.status == 401) {
router.push('/login')
sessionStorage.clear()
// 清空vuex中的数据
window.location.reload()
}
return res
})
Vue.prototype.$http = Axios