Vuex实现角色鉴权

时间:2022-06-02 陆荣涛人气:0

前言

一直以来，我们使用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) {
            // 定义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'
})

总结

加载全部内容