Vue如何做权限管理

权限是什么

前端的权限其实就是请求的发起权力，主要有下面两种：

• 页面加载触发
• 页面上按钮点击触发

如何做

主要分为四部分

1.接口权限

接口权限一般使用jwt来验证，在登录拿到token后，将token存储起来，通过请求器进行拦截，每次携带token

    axios.interceptors.request.use    (config => {
        config.headers['token'] = cookie.   get('token')
        return config
    })
    axios.interceptors.response.use(res=>   {},{response}=>{
        if (response.data.code ===    40099 || response.data.code ===   40098) { //token过期或者错误
            router.push('/login')
        }
    })

具体关于token的信息，参考:token介绍

2. 路由权限控制

方法一

初始化就挂在全部路由，并且标记好权限信息，每次路由跳转前做校验

方案二

初始化的时候先挂载不需要权限控制的路由，比如登录页，404等错误页。如果用户通过URL进行强制访问，则会直接进入404，相当于从源头上做了控制

登录后，获取用户的权限信息，然后筛选有权限访问的路由，在全局路由守卫里进行调用addRoutes添加路由