VUE 后台管理系统权限控制

谈一谈VUE 后台管理系统权限控制

　　前端权限从本质上来讲，就是控制视图层的展示，比如说是某个页面或者某个按钮，后端权限可以控制某个用户是否能够查询数据，是否能够修改数据等操作，后端权限大部分是基于RBAC，比如说一个用户可能会有多个角色，而一个角色可以会有不同权限

开始正题部分了

1. 前端做权限有什么好处？

降低非法操作的可能性
尽可能排除不必要的请求，降低服务器压力没必要的请求，不具备权限的请求，应该压根就不要发送，请求少了，服务器压力自然就很减轻
提高用户体验就给用户展示已有权限的功能，避免在界面上给用户带来困恼

2. 前端权限的控制思路

菜单的控制

用户没有权限菜单就不要展示没有的侧边栏

界面的控制

用户没有登录，而是在地址栏手动的输入地址，界面肯定是不能展示的而我们要强制是跳转到登录界面
用户登录了，但是手动输入跳转到没有权限的界面，我们要强制跳转到404界面

按钮的控制

用户进入页面，但是他只有查看权限，删除和修改按钮就不应该展示出来

请求和响应的控制

用户篡改了非常规操作，比如禁用的按钮改成启用状态，此时发送的请求就应该被拦截

3. Vue的权限控制实现

// 后面的操作都是基于这个结构， 结构可以跟后台沟通
// 后台返回的登陆数据
{
  data: [用户名，token 什么的],
  rights: [
    {
      id:1,
      authName: '用户管理',
      icon: 'icon-user',
      children: [
        {
          id: 1_1,
          authName: '用户列表',
          path: 'users',
          rights: ['view', 'add', 'edit', 'delete']
        }
      ]
    },
     {
      id:2,
      authName: '角色管理',
      icon: 'icon-tiji',
      children: [
        {
          id: 2_1,
          authName: '角色列表',
          path: 'roles',
          rights: ['view', 'add']
        }
      ]
    }
  ]
}

菜单的控制
（1）查看登陆之后的数据
　　 token 用于前端用户的状态保持
　　 rights 该用户具备的权限数据，一级菜单就对应着一级权限，二级菜单就对应二级权限
（2）根据rights数据，动态渲染左侧菜单栏，为了方便使用，一般放在vuex中但是vuex中的数据在页面刷新就会消失，所以配合本地存储使用，localstoage或者sessionstoage 看产品需求　
（3）退出登录的时候要把本地存储的数据清空和vuex数据也清空，vuex中数据清空最简单的方法就是 window.location.reload()

界面的控制
（1）假如用户不进行登陆，输入相应页面的网址也可以进入页面，所有我们要判断用户的是否登录
　　

 router.beforeEach((to, form, next )=> {
   if (to.path == '/Login') {
     next()
   } else {
     const token = sessionstoage.getItem('token')
     if (!token) {
       next('/Login')
     } else {
       next()
     }
   }
 })

（2）进行token验证后，会发现用户登录后还是可以通过url访问不存在权限的页面
　　这里就需要使用动态路由
　　首先在router.js export 一个方法

// router.js
import store from '@/sotre'
 
const userRule = { path: '/users', component: Users}
const roleRule = { path: '/roles', component: Roles}
 
// vuex中存放的rightsList中每个path添加到路由中 怎么添加呢？？？ 请看
users，roles都是跟后台定义好的，所以对号入座
const ruleMapping = {
  'users': userRule,
  'roles': roleRule
}
 
export function initRoutes () {
  const currentRoutes = router.option.routes // 可以拿到router的路由配置信息
  const rightsList = store..state.rightsList // 取出vuex存储的用户路由信息
  rightsList.forEach(item => {
    item.children.forEach(items => {
      currentRoutes[2].push(ruleMapping[items.path]) // 这步很关键 把对应的值push进去
    })
  })
  router.addRoutes(currentRoutes)
}

在login页面引入登陆成功的时候调用要在vuex赋值之后再调用
　这时又会发现一个问题，页面一刷新访问那个页面都会是404
　因为动态添加的路由一刷新页面就会消失，
　哼哼哼，仔细听
　我们可以在App页面中created生命周期函数中调用router.js 中initRoutes方法，
　你就会发现页面刷新也没事了而且登陆的用户通过url跳转没有权限的页面也是不可以了

按钮的控制
...