前端权限控制

前端权限的意义

前端权限控制思路

代码修改：

修改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

小结