使用vuex实现后台管理中角色鉴权

使用vuex实现vue后台管理中的角色鉴权

一直以来，我们使用vue做后台管理时，不同角色的权限功能，都是我们老大难的问题，本篇文章我将手把你带你实现vue后台管理中的用户角色权限功能！

功能分析

在常见管理系统中，超级管理员会给每个用户分配角色，利于管理员角色、编辑人员角色、行政人员角色，不同角色在登录时，我们侧边导航不一样，可以访问的路由也是不一样的。

实现思路

常见的角色鉴权思路有两种：

​ 1 静态的

​ 通俗点将就是前端将 所有的导航数据以及所有的路由定死在前端，每个导航和路由新增roles属性代表当前路由或当前导航可以访问的角色有哪些，登录时接口返回用户角色 role，进行判断和过滤，实现鉴权

​ 2 动态的

​ 前端定定义基础路由，用户的导航数据和 路由数据 存储在数据库中，用户登录时，请求接口获取当前用户可以访问的路由和菜单，前端拿到数据 动态渲染导航，通过 vue路由 addRoute方法动态添加到路由中

代码实现

本文，将结合vuex带你手把手实现静态角色鉴权思路（后续将会讲解动态角色鉴权）

vuex中定义user模块，存储用户信息以及用户侧边导航数据

// 引入封装好的 登录的model 函数
import doLogin from '@/api'

export default {
   
   
    namespaced: true,
    state: {
   
   
         // 用户信息利用缓存备份防止刷新 取值时判断缓存获取
         // 用户的基础信息 如nickName昵称和avatar用户头像
        userInfo: localStorate.getItem('userInfo')
        			?
        		  JSON.parse(localStorate.getItem('userInfo'))
        			:
        		  {
   
   }
        ,
        // 登录返回的token 秘钥
        token: localStorage.getItem('token') || '', 
        // 当前用户的角色
        role: localStorage.getItem('role') || '', 
        // 所有的导航 以下是示例
        menus: [
          // 每个导航 新增roles属性 代表可以访问当前用户的所有的角色
          {
   
   
            label: '仪表盘',
            path: '/dashBoard',
            roles: ['admin', 'a', 'b', 'superAdmin'],
            icon: 'el-icon-s-data'
          },
          {
   
   
            label: '商品管理',
            path: 'el-icon-s-goods',
            icon: 'el-icon-s-data',
            roles: ['admin', 'a', 'b', 'superAdmin']
          },
          {
   
   
            label: '个人中心',
            path: '/user',
            roles: ['admin', 'a', 'b', 'superAdmin'],
            icon: 'el-icon-user-solid'
          },
          {
   
   
            label: '设置',
            path: '/setting',
            roles: ['a', 'b', 'superAdmin'],
            icon: 'el-icon-s-tools'
          }
        ]
    },
    getters: {
   
   
        authMenus (state)