VUE 后台管理系统权限控制

Posted 2021-02-20 dachengzizi

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

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

开始正题部分了

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

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

2. 前端权限的控制思路

• 菜单的控制

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

• 界面的控制

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

• 按钮的控制

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

• 请求和响应的控制

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

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

3. 按钮的控制
   ...