VUE 后台管理系统权限控制

Posted dachengzizi

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了VUE 后台管理系统权限控制相关的知识,希望对你有一定的参考价值。

谈一谈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. 按钮的控制
    ...

以上是关于VUE 后台管理系统权限控制的主要内容,如果未能解决你的问题,请参考以下文章

vue中实现后台系统权限管理的功能

vue中实现后台系统权限管理的功能

后台系统的权限控制与管理

vue 按钮 权限控制

Vue权限控制——动态注册路由

Vue权限控制——动态注册路由