怎么使用Vuex实现Vue后台管理中的角色鉴权

这篇文章主要介绍“怎么使用Vuex实现Vue后台管理中的角色鉴权”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“怎么使用Vuex实现Vue后台管理中的角色鉴权”文章能帮助大家解决问题。

功能分析

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

实现思路

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

1 静态的

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

2 动态的

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

代码实现

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) {            // 定义getters 过滤当前用户的role不能访问的导航            // 这就是当前用户role可以访问的导航            return state.menus.filter(menu=> menu.roles.includes(state.role))        }    },    mutations: {        INIT_LOGIN (state, {userInfo, token, role}) {           // 登录成功 存储 用户信息            state.userInfo = userInfo            state.token = token            state.role = role            // 缓存起来防止刷新 vuex状态丢失            localStorage.setItem('userInfo', jsON.stringify(userInfo))            localStorage.setItem('token', token)            localStorage.setItem('role', role)        }    },    actions: {        DO_LOGIN ({commit}, params) {            // action中发送请求进行登录            doLogin(params).then(res => {                if(res.data.code === 200) {                    // 请求成功触发mutation存储用户信息 包括role                    commit('INIT_LOGIN', {                        userInfo: res.data.data.userInfo,                        token: res.data.data.token,                        role: res.data.data.role                    })                }            })        }    }}

router中路由meta中新增roles 定义当前路由可以访问的所有的角色

const routes = [  {      path: '/',      component: Admin,      meta: {        roles: '*' // * 所有角色都可以访问      },      children: [        {          path: '/',          redirect: '/dashBoard',          meta: {            roles: ['admin', 'a', 'b', 'superAdmin']          }        },        {          path: '/dashBoard',          name: '仪表盘',          component: () => import('_views/DashBoard'),          meta: {            roles: ['admin', 'a', 'b', 'superAdmin']          }        },        {          path: '/itemLists',          name: '商品管理',          component: () => import('_views/Items'),          meta: {            roles: ['admin', 'a', 'b', 'superAdmin']          }        },        {          path: '/itemAdd',          name: '增加商品',          component: () => import('_views/Items/components/ItemAdd'),          meta: {            roles: ['admin', 'a', 'b', 'superAdmin']          }        },        {          path: '/itemUpdate',          name: '修改商品',          component: () => import('_views/Items/components/ItemUpdate'),          meta: {            roles: ['admin', 'a', 'b', 'superAdmin']          }        },        {          path: '/cateLists',          name: '分类管理',          component: () => import('_views/Cate'),          meta: {            roles: ['admin', 'a', 'b', 'superAdmin']          }        },        {          path: '/user',          name: '个人中心',          component: () => import('_views/SetUser'),          meta: {            roles: ['admin', 'a', 'b', 'superAdmin']          }        },        {          path: '/setting',          name: '设置',          component: () => import('_views/Setting'),          meta: {            roles: ['a', 'b', 'superAdmin']          }        }      ]    },    {      path: '/login',      component: () => import('_views/Login'),      meta: {        roles: '*'      }    },    {      path: '*',      component: () =>        import('_views/NotFound'),      meta: {        roles: '*'      }    },    {      path: '/noAuth',      component: () =>        import('_views/Nopermission'),      meta: {        roles: '*'      }    }]

router新增路由前置首位 做权限拦截

router.beforeEach((to, from, next) => {   //登录鉴权   if (to.path !== '/login') {    if (isLogin()) {            if (to.meta.roles === '*') {        // 所有用户都可以访问 直接放行        next()      } else {        // 判断 roles中是否包含 用户的role        const role = localStorage.getItem('role') || ''        if (to.meta.roles.includes(role)) {          next()        } else {          // 去没有权限这个页面 这是没有权限路由需要自己创建一个          next('/noAuth')        }      }    } else {      next('/login')    }  } else {    next()  }}

侧边导航页面 使用 getters中的 authMenus 循环侧边导航

    <el-menu  @select="choseMenu">          <div v-for="nav in $store.getters['user/authMenus ']" :key="nav.label">            <el-menu-item :index="nav.label" @click="switchNav(nav.path, nav.label)" v-if="!nav.children">              <i :class="nav.icon"></i>              <span slot="title">{{nav.label}}</span>            </el-menu-item>            <el-submenu :index="nav.label" v-if="nav.children">              <template slot="title">                <i :class="nav.icon"></i>                <span>{{nav.label}}</span>              </template>                <el-menu-item                  v-for="subNav in nav.children"                  :key="subNav.path"                  :index="subNav.label"                  @click="switchNav(subNav.path, subNav.label)">{{subNav.label}}</el-menu-item>            </el-submenu>          </div>    </el-menu>

最后一步 登录页登录时调用 请求登录的action即可大功告成

this.$store.dispatch('user/DO_LOGIN',{    userName: 'xxx',    pwd: 'xxxx'})

关于“怎么使用Vuex实现Vue后台管理中的角色鉴权”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网精选频道，小编每天都会为大家更新不同的知识点。