快捷導(dǎo)航

詳解如何使用Vuex實(shí)現(xiàn)Vue后臺(tái)管理中的角色鑒權(quán)

更新時(shí)間：2022年05月27日 16:23:48 作者：陸榮濤

最近參與了公司一個(gè)新的B端項(xiàng)目的研發(fā),從無(wú)到有搭建項(xiàng)目的過(guò)程中,遇到了關(guān)于項(xiàng)目鑒權(quán)的問(wèn)題,這篇文章主要給大家介紹了關(guān)于如何使用Vuex實(shí)現(xiàn)Vue后臺(tái)管理中的角色鑒權(quán)的相關(guān)資料,需要的朋友可以參考下

vuex中定義user模塊，存儲(chǔ)用戶信息以及用戶側(cè)邊導(dǎo)航數(shù)據(jù)
router中路由meta中新增roles 定義當(dāng)前路由可以訪問(wèn)的所有的角色
router新增路由前置首位做權(quán)限攔截
側(cè)邊導(dǎo)航頁(yè)面使用 getters中的 authMenus 循環(huán)側(cè)邊導(dǎo)航
最后一步登錄頁(yè)登錄時(shí)調(diào)用請(qǐng)求登錄的action即可大功告成

總結(jié)

前言

一直以來(lái)，我們使用vue做后臺(tái)管理時(shí)，不同角色的權(quán)限功能，都是我們老大難的問(wèn)題，本篇文章我將手把你帶你實(shí)現(xiàn)vue后臺(tái)管理中的用戶角色權(quán)限功能！

功能分析

在常見(jiàn)管理系統(tǒng)中，超級(jí)管理員會(huì)給每個(gè)用戶分配角色，利于管理員角色、編輯人員角色、行政人員角色，不同角色在登錄時(shí)，我們側(cè)邊導(dǎo)航不一樣，可以訪問(wèn)的路由也是不一樣的。

實(shí)現(xiàn)思路

常見(jiàn)的角色鑒權(quán)思路有兩種：

1 靜態(tài)的

通俗點(diǎn)將就是前端將所有的導(dǎo)航數(shù)據(jù)以及所有的路由定死在前端，每個(gè)導(dǎo)航和路由新增roles屬性代表當(dāng)前路由或當(dāng)前導(dǎo)航可以訪問(wèn)的角色有哪些，登錄時(shí)接口返回用戶角色 role，進(jìn)行判斷和過(guò)濾，實(shí)現(xiàn)鑒權(quán)

2 動(dòng)態(tài)的

前端定定義基礎(chǔ)路由，用戶的導(dǎo)航數(shù)據(jù)和路由數(shù)據(jù) 存儲(chǔ)在數(shù)據(jù)庫(kù)中，用戶登錄時(shí)，請(qǐng)求接口獲取當(dāng)前用戶可以訪問(wèn)的路由和菜單，前端拿到數(shù)據(jù) 動(dòng)態(tài)渲染導(dǎo)航，通過(guò) vue路由 addRoute方法動(dòng)態(tài)添加到路由中

代碼實(shí)現(xiàn)

本文，將結(jié)合vuex帶你手把手實(shí)現(xiàn)靜態(tài)角色鑒權(quán)思路（后續(xù)將會(huì)講解動(dòng)態(tài)角色鑒權(quán)）

vuex中定義user模塊，存儲(chǔ)用戶信息以及用戶側(cè)邊導(dǎo)航數(shù)據(jù)

// 引入封裝好的 登錄的model 函數(shù)
import doLogin from '@/api'

export default {
    namespaced: true,
    state: {
         // 用戶信息利用緩存?zhèn)浞莘乐顾⑿?取值時(shí)判斷緩存獲取
         // 用戶的基礎(chǔ)信息 如nickName昵稱和avatar用戶頭像
        userInfo: localStorate.getItem('userInfo')
           ?
            JSON.parse(localStorate.getItem('userInfo'))
           :
            {}
        ,
        // 登錄返回的token 秘鑰
        token: localStorage.getItem('token') || '', 
        // 當(dāng)前用戶的角色
        role: localStorage.getItem('role') || '', 
        // 所有的導(dǎo)航 以下是示例
        menus: [
          // 每個(gè)導(dǎo)航 新增roles屬性 代表可以訪問(wèn)當(dāng)前用戶的所有的角色
          {
            label: '儀表盤(pán)',
            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: '個(gè)人中心',
            path: '/user',
            roles: ['admin', 'a', 'b', 'superAdmin'],
            icon: 'el-icon-user-solid'
          },
          {
            label: '設(shè)置',
            path: '/setting',
            roles: ['a', 'b', 'superAdmin'],
            icon: 'el-icon-s-tools'
          }
        ]
    },
    getters: {
        authMenus (state) {
            // 定義getters 過(guò)濾當(dāng)前用戶的role不能訪問(wèn)的導(dǎo)航
            // 這就是當(dāng)前用戶role可以訪問(wèn)的導(dǎo)航
            return state.menus.filter(menu=> menu.roles.includes(state.role))
        }
    },
    mutations: {
        INIT_LOGIN (state, {userInfo, token, role}) {
           // 登錄成功 存儲(chǔ) 用戶信息
            state.userInfo = userInfo
            state.token = token
            state.role = role
            // 緩存起來(lái)防止刷新 vuex狀態(tài)丟失
            localStorage.setItem('userInfo', JSON.stringify(userInfo))
            localStorage.setItem('token', token)
            localStorage.setItem('role', role)
        }
    },
    actions: {
        DO_LOGIN ({commit}, params) {
            // action中發(fā)送請(qǐng)求進(jìn)行登錄
            doLogin(params).then(res => {
                if(res.data.code === 200) {
                    // 請(qǐng)求成功觸發(fā)mutation存儲(chǔ)用戶信息 包括role
                    commit('INIT_LOGIN', {
                        userInfo: res.data.data.userInfo,
                        token: res.data.data.token,
                        role: res.data.data.role
                    })
                }
            })
        }
    }
}

router中路由meta中新增roles 定義當(dāng)前路由可以訪問(wèn)的所有的角色

const routes = [
  {
      path: '/',
      component: Admin,
      meta: {
        roles: '*' // * 所有角色都可以訪問(wèn)
      },
      children: [
        {
          path: '/',
          redirect: '/dashBoard',
          meta: {
            roles: ['admin', 'a', 'b', 'superAdmin']
          }
        },
        {
          path: '/dashBoard',
          name: '儀表盤(pán)',
          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: '分類(lèi)管理',
          component: () => import('_views/Cate'),
          meta: {
            roles: ['admin', 'a', 'b', 'superAdmin']
          }
        },
        {
          path: '/user',
          name: '個(gè)人中心',
          component: () => import('_views/SetUser'),
          meta: {
            roles: ['admin', 'a', 'b', 'superAdmin']
          }
        },
        {
          path: '/setting',
          name: '設(shè)置',
          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新增路由前置首位做權(quán)限攔截

router.beforeEach((to, from, next) => {
   //登錄鑒權(quán) 
  if (to.path !== '/login') {
    if (isLogin()) {
      /*
        登錄成功后
          判斷當(dāng)前用戶的角色 能否訪問(wèn)當(dāng)前路由
          可以的話 放行
          不能 到?jīng)]有權(quán)限這個(gè)頁(yè)面去
      */
      if (to.meta.roles === '*') {
        // 所有用戶都可以訪問(wèn) 直接放行
        next()
      } else {
        // 判斷 roles中是否包含 用戶的role
        const role = localStorage.getItem('role') || ''
        if (to.meta.roles.includes(role)) {
          next()
        } else {
          // 去沒(méi)有權(quán)限這個(gè)頁(yè)面 這是沒(méi)有權(quán)限路由需要自己創(chuàng)建一個(gè)
          next('/noAuth')
        }
      }
    } else {
      next('/login')
    }
  } else {
    next()
  }
}

側(cè)邊導(dǎo)航頁(yè)面使用 getters中的 authMenus 循環(huán)側(cè)邊導(dǎo)航

    <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>

最后一步登錄頁(yè)登錄時(shí)調(diào)用請(qǐng)求登錄的action即可大功告成

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

總結(jié)

到此這篇關(guān)于如何使用Vuex實(shí)現(xiàn)Vue后臺(tái)管理中的角色鑒權(quán)的文章就介紹到這了,更多相關(guān)Vuex實(shí)現(xiàn)角色鑒權(quán)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: