Vorwort
Nachdem das System eine Zeit lang verwendet wurde, schlug der Produktmanager die Notwendigkeit vor, ein neues Unterkonto zu erstellen und Menüberechtigungen zu konfigurieren. Konfigurieren Sie das Unterkonto so, dass es über einige Menüberechtigungen verfügt. Geben Sie nach der Anmeldung des Unterkontos direkt die Route der Seite ein, die nicht zum Unterkonto gehört, und fordern Sie eine Weiterleitung zur 404-Seite an. das heißt, um ein Abfangen zu erreichen.
Start
Nach verschiedenen Referenzen habe ich mich entschieden, addRoute zum dynamischen Hinzufügen von Routen zu verwenden. Nach der Anmeldung kehrt der Hintergrund zum Kontomenü zurück, bei dem es sich um eine Code-Str-Sammlung handelt. Dieser Code entspricht dem Code jedes Menüs, der von der Vorder- und Rückseite vereinbart wird.
Die Schritte sind wie folgt:
1. router/index.js: Definieren Sie die anfängliche Route „ConstantRoutes“ und die sich dynamisch ändernde Route „DynamicRoutes“;
2. „generateRoutes.js“: (Die Datei kann unter „Utils“ abgelegt werden, ich habe sie unter „Assets“ abgelegt.) Diese Datei definiert Die Methode „generateRoutes“ filtert Routen dynamisch, vergleicht die vom Hintergrund zurückgegebene Codesammlung mit DynamicRoutes, generiert Routen, die dynamisch hinzugefügt werden müssen, und fügt sie dann mit router.addRoute(); hinzu. 3. login.vue: Nach der Anmeldung wird
die Der Hintergrund gibt den Code der Kontosammlung zurück. Rufen Sie die Methode „generateRoutes“ auf, um die Navigation dynamisch zu generieren.
4. router/index.js:
① Routenschutz;
② Schreiben Sie asynchrone Vorgänge in die Funktion router.onReady (), die zum Aktualisieren der Seite verwendet wird im angemeldeten Zustand, um Codesammlung zu erhalten und dynamische Navigation zu generieren;
der Code
router/index.js
//静态路由
const constantRoutes = [
{
{
path: '/login',
name: 'login',
component: (resolve) => require(['../views/admin/login.vue'], resolve),
meta:{
title:'登录',needLogin:false,noLeft:true}
}];
//动态路由
export const DynamicRoutes = [
{
// 首页
path: '/index/',
name: 'index',
component:(resolve) => require(['../views/index.vue'], resolve),
meta:{
title:'首页',head:true,code:'v1'}
},
.
.
.
] ;
const createRouter = () => new Router({
mode: 'history',
base: 'cs',
routes: constantRoutes
})
const router = createRouter();
// 路由守卫
router.beforeEach((to, from, next)=>{
if(to.matched.some(res=>('needLogin' in res.meta) && (res.meta.needLogin == false))){
//不需要登录的页面
if((to.path == '/login') && (window.sessionStorage['user_token'])){
//登录页面 且 有token（说明登录过）
next('/index');
}else{
next();
}
}else{
//需要登录
if(window.sessionStorage['user_token']){
//有token，登录状态下
next()
}else{
//无token，跳转回宣传首页
next({
path: '/login'});
}
}
});
//异步请求写在这里面
router.onReady(() => {
console.group('%c%s', 'color:red', `${
new Date().getTime()} 路由完成初始导航----------`)
console.log('添加前-所有活跃的路由记录列表', router.getRoutes())
if(window.sessionStorage['user_token']){
//已登录
userApi.getUserInfo().then(response => {
if (response.code == 200) {
let data = response.data;
let accountType = data.accountType;//账户类型
let authCodes = data.authCodes;//code合集
generateRoutes(accountType,authCodes);
console.log('添加后-所有活跃的路由记录列表', router.getRoutes())
console.groupEnd()
}
})
}
});
// 重置路由
export function resetRouter () {
const newRouter = createRouter()
router.matcher = newRouter.matcher
}
export default router;
generateRoutes.js
import router,{
DynamicRoutes} from '@/router/index'
//匹配动态生成导航
export function generateRoutes (accountType,authCodes) {
//1.过滤需要的动态路由
let realRoutes = [];
if(accountType == 1){
//主账号，有所有路由
realRoutes = DynamicRoutes;
}else{
//子账号，根据authCodes过滤
DynamicRoutes.forEach(item=>{
if(!('children' in item)){
if(authCodes.indexOf(item.meta.code) != '-1'){
realRoutes.push(item);
}
}else{
let arr = [];
item.children.forEach(item1=>{
if(authCodes.indexOf(item1.meta.code) != '-1'){
arr.push(item1);
}
})
if(arr.length > 0){
let item2 = Object.assign({
},item);
item2.children = arr;
realRoutes.push(item2);
}
}
})
}
//2.添加路由
realRoutes.forEach(route => {
router.addRoute(route)
})
//3、添加输入其他路由时需要重定向的路由
router.addRoute({
path: '*',
redirect: '/userCenter/myAccount'
});
}
Rufen Sie nach der erfolgreichen Anmeldung von login.vue die Methode zum Generieren der Navigation auf
import {
generateRoutes } from '@/assets/js/func/generateRoutes.js'
export default {
name: 'login',
data(){
login() {
api.login(params).then(res=>{
this.user=res.data;
let accountType = this.user.accountType;
let authCodes = this.user.authCodes;
//1.生成导航
generateRoutes(accountType,authCodes);
.
.
.
})
}
}
Beenden
Notieren Sie das Problem hier. Wenn Änderungen erforderlich sind, teilen Sie mir dies bitte mit. Artikelreferenz: Die addRoute-Methode von vue-router implementiert die Berechtigungskontrolle