フロントエンド ルーティング テーブルのロール権限管理。異なるロールのサイドバーにログインして、対応するページを表示します。
デモは vue-admin-template に基づいて変更され、最初に実装の効果が示されます。
1. まず、src/router/index.js にルーティング テーブルを追加します。ここで、constantRoutes はすべてのロールに表示されるルートに設定され、asyncRouterMap は対応する承認された担当者に表示されるルートになります。デモのルーティング テーブル コードは次のとおりです。 :
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
//避免导航守卫报错
const originalPush = Router.prototype.push
Router.prototype.push = function push(location, onResolve, onReject) {
if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
return originalPush.call(this, location).catch(err => err)
}
/* Layout */
import Layout from '@/layout'
//所有人可见
export const constantRoutes = [
{
path: '/login',
component: () => import('@/views/login/index'),
hidden: true
},
{
path: '/404',
component: () => import('@/views/404'),
hidden: true
},
{
path: '/',
component: Layout,
redirect: '/dashboard',
children: [
{
path: 'dashboard',
name: 'Dashboard',
component: () => import('@/views/dashboard/index'),
meta: {
title: '首页',
icon: 'dashboard'
}
}
]
},
{
path: '/example',
component: Layout,
children: [
{
path: 'index',
name: 'Table',
component: () => import('@/views/table/index'),
meta: {
title: '所有人可见',
icon: 'table'
}
}
]
},
// 404 page must be placed at the end !!!
{
path: '*', redirect: '/404', hidden: true }
]
//相应权限人员可见
export const asyncRouterMap = [
{
path: '/form',
component: Layout,
children: [
{
path: 'index',
name: 'Form',
component: () => import('@/views/form/index'),
meta: {
title: '所有人可见',
icon: 'form',
role: ['admin']
}
}
]
},
{
path: '/system',
component: Layout,
redirect: 'system/test',
name: 'System',
alwaysShow: true,
meta:{
title:'系统管理', icon: 'nested', role: ['admin','editor']},
children: [
{
path: '权限管理',
name: 'test',
name: 'Test',
component: () => import('@/views/system/index'),
meta: {
title: '权限修改',
icon: 'table',
role: ['admin']
}
}
]
}
]
const createRouter = () =>
new Router({
// mode: 'history', // require service support
scrollBehavior: () => ({
y: 0 }),
routes: constantRoutes
})
const router = createRouter()
// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
const newRouter = createRouter()
router.matcher = newRouter.matcher // reset router
}
export default router
2. src/api/user.jsにユーザーログイン、ユーザー情報取得、ログアウトのインターフェースを作成
3.store/modules/user.jsファイルに、ロール権限ロールの取得情報を追加します。
4. src/store/modules/ ディレクトリに Permission.js を作成し、異なる権限を持つ動的に追加されたルーティング テーブルを保存します。ファイル コードは次のとおりです。
import {
asyncRouterMap, constantRoutes } from '@/router'
/**
* Use meta.role to determine if the current user has permission
* @param role
* @param route
*/
function hasPermission(role, route) {
if (route.meta && route.meta.role) {
// return roleArr.some(role => route.meta.role.includes(role)) //当给的角色权限为数组形式可采取该方式判断返回值
return route.meta.role.includes(role)?true:false //当角色权限为字符串时，采用该方式判断
} else {
return true
}
}
/**
* 将符合相应权限的路由表筛选出来
* @param routes asyncRouterMap
* @param role
*/
export function filterasyncRouterMap(routes, role) {
const res = []
routes.forEach(route => {
const tmp = {
...route }
if (hasPermission(role, tmp)) {
console.log(111);
if (tmp.children) {
tmp.children = filterasyncRouterMap(tmp.children, role)
}
res.push(tmp)
}
})
return res
}
const permission = {
state: {
routes: [],
addRoutes: []
},
mutations: {
SET_ROUTES: (state, routes) => {
state.addRoutes = routes
state.routes = constantRoutes.concat(routes)
}
},
actions: {
generateRoutes({
commit }, role) {
return new Promise(resolve => {
let accessedRoutes
//如果角色是admin
if (role.includes('admin')) {
//将route.js中的admin权限人员可见的路由表加入，此处我们只有admin和editor两个角色
accessedRoutes = asyncRouterMap || []
} else {
accessedRoutes = filterasyncRouterMap(asyncRouterMap, role) || []
}
commit('SET_ROUTES', accessedRoutes)
resolve(accessedRoutes)
})
}
}
}
export default permission
5. src/store/getters.js のコードは次のとおりです (注: state.permission.routes を state.user.routes として記述することはできません)。
6. src/store/index.js のコードは次のとおりです。
7. 最後に、vue-router の addRoute 関数を使用して、src/permission.js のルート ナビゲーション ガードに動的ルートを追加します。
8. src/layout/components/Sidebar/index に新しいルーティング テーブルを追加します。コードは次のとおりです。
最終的には、記事の最初の部分のアニメーション効果を実現し、フロントエンド ルーティング テーブルの権限管理機能の実現を簡単に記録することができ、不正確な点があれば、コメントで交換して議論することができます。ソース コードは記事の最後に掲載されており、依存関係をインストールした後、直接実行できます。
記事の最後にあるデモ コード クラウドのリンク:権限管理のデモ