Контроль разрешений фоновой системы на основе серии Vue.js 2.x + Element UI
Предисловие: Эти вещи о маршрутизации разрешений vue...
Предыстория проекта: существует система управления фоном и два типа персонала.
①Супер администратор (называемый администратором), ②Обычный пользователь (называемый редактором)
Каждый тип людей видит разные панели операций и может выполнять разные операции, поэтому программа должна решать каждую проблему с разрешениями.
Процесс трудно сказать, нелегко сказать
【Запутанная ранняя стадия】
Я зашел в Baidu и Google и много искал о разрешениях.Может быть, доброжелательный видит доброжелательного, а мудрый видит мудрость.Различные введения еще больше меня запутывают, и я действительно не знаю, с чего начать:
1) Пусть бэкенд возвращает json данные о разрешениях, но как быть с такими данными я не знаю;
2) Он обрабатывается во внешнем роутинге, но я не знаю, как использовать какие атрибуты для достижения этой функции;
【наконец】
Последний просмотр статьиРука об руку, вы попадете на задний план с vue series 2 (разрешение на вход), но обнаружил, что в коде много функций разрешений, которые интегрированы во фреймворк.Печально, я просто хочу реализовать небольшую функцию разрешений, но мне нужно внимательно изучить код автора.
Конкретные идеи реализации
1 При создании экземпляра vue монтируйте vue-router, но в это время vue-router монтирует некоторые страницы входа или общедоступные страницы без разрешения.
2 Когда пользователь входит в систему, получите роль, сравните роль и требуемые разрешения для каждой страницы таблицы маршрутизации и создайте таблицу маршрутизации, доступную для конечного пользователя.
3. Вызовите router.addRoutes(store.getters.addRouters), чтобы добавить маршруты, доступные пользователю.
4 Используйте vuex для управления таблицей маршрутизации и визуализации компонентов боковой панели в соответствии с маршрутами, доступными в vuex.
Не беда, если я немного запутался, постараюсь объяснить каждый шаг простыми словами
1 В маршрутизации router.js объявите маршрут с разрешения администратора (asyncRouterMap для асинхронно смонтированного маршрута)
// router.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export const constantRouterMap = [
{
path: '/',
redirect: '/login',
hidden: true
},
{
path: '/login',
name: '登录页面',
hidden: true,
component: resolve => require(['../views/login/Login.vue'], resolve)
},
{
path: '/Readme',
// name: 'Readmehome',
index: 'Readme',
meta: {
title: 'Readme',
icon: 'el-icon-menu'
},
component: resolve => require(['../components/common/Home.vue'], resolve),
children: [
{
name: 'Readme',
path: '/',
meta: { title: 'Readme', icon: 'el-icon-menu' },
component: resolve => require(['../components/page/Readme.vue'], resolve)
}
]
}
]
export default new Router({
routes: constantRouterMap
})
// 异步挂载的路由
// 动态需要根据权限加载的路由表
export const asyncRouterMap = [
{
path: '/permission',
// name: 'permissionhome',
meta: {
title: 'permission',
icon: 'el-icon-setting',
roles: ['admin']
},
component: resolve => require(['../components/common/Home.vue'], resolve),
children: [
{
name: 'permission',
path: '/permission',
meta: {
title: 'permission', icon: 'el-icon-menu', roles: ['admin']
},
component: resolve => require(['../components/page/permission.vue'], resolve)
}
]
},
{ path: '*', redirect: '/404', hidden: true }
]
Здесь мы базируемсяофициальная рекомендация vue-routerМетод использует метатег, чтобы указать, к каким разрешениям может получить доступ страница. Например, meta: { role: ['admin','super_editor'] } означает, что на страницу могут заходить только администратор и суперредактор.
Примечание: здесь необходимо обратить внимание на то, что страница 404 должна загружаться последней.addRoutes when you've got a wildcard route for 404s does not work
2 Когда пользователь входит в систему, получите роль, сравните роль и необходимые разрешения для каждой страницы таблицы маршрутизации, вызовите router.addRoutes (store.getters.addRouters), чтобы добавить доступные пользователю маршруты, и сгенерируйте поверхность доступных маршрутов. Таблица маршрутизации существует в vuex
permission.js
// permission.js
import router from './router'
import store from './store'
import { Message } from 'element-ui'
import { getToken } from '@/utils/auth' // 验权
const whiteList = ['/login', '/authredirect'] // 不重定向白名单
router.beforeEach((to, from, next) => {
if (getToken()) { // 判断是否有token
if (to.path === '/login') {
next({ path: '/' })
} else {
if (store.getters.roles.length === 0) {
console.log('roles====0')
store.dispatch('GetInfo').then(res => { // 拉取用户信息
const roles = res.data.roles // note: roles must be a array! such as: ['editor','develop']
console.log('roles?', roles)
store.dispatch('GenerateRoutes', { roles }).then(() => { // 根据roles权限生成可访问的路由表
console.log('addrouters', store.getters.addRouters)
router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
})
}).catch(() => {
store.dispatch('FedLogOut').then(() => {
Message.error('验证失败,请重新登录')
next({ path: '/login' })
})
})
} else {
console.log('====1')
next() // 当有用户权限的时候，说明所有可访问路由已生成 如访问没权限的全面会自动进入404页面
}
}
} else {
if (whiteList.indexOf(to.path) !== -1) {
next()
} else {
next('/login')
}
}
})
3 Используйте vuex для управления таблицей маршрутизации и рендеринга компонента боковой панели (меню) в соответствии с маршрутами, доступными в vuex.
Окончательная ссылка для предварительного просмотра
Система разрешений, реализованная vue
Начальная обучающая группа 493671066, там много красивых женщин. Садись в машину, уже поздно объяснять.
Загрузка исходного кода
Vue реализует загрузку исходного кода управления разрешениями