prefacio
Después de usar el sistema por un tiempo, el gerente de producto planteó la necesidad de crear una nueva subcuenta y configurar los permisos del menú. Configure la subcuenta para tener algunos permisos de menú, y después de que la subcuenta inicie sesión, ingrese directamente la ruta de la página que no pertenece a la subcuenta en la barra de direcciones y solicite ser redirigido a la página 404 , que es lograr la intercepción.
comenzar
Después de varias referencias, decidí usar addRoute para agregar rutas dinámicamente. Después de iniciar sesión, el fondo volverá al menú de la cuenta, que es una colección de código str. Este código corresponde al código de cada menú, que se acuerda por el anverso y el reverso.
Los pasos son los siguientes:
1. router/index.js: defina la ruta inicial constantRoutes y la ruta que cambia dinámicamente DynamicRoutes
2. generateRoutes.js: (el archivo se puede colocar en utils, lo puse en assets) Este archivo define el método generateRoutes, filtre rutas dinámicamente, compare la colección de códigos devuelta por el fondo con DynamicRoutes, genere rutas que deben agregarse dinámicamente y luego agréguelas con router.addRoute()
; background devuelve el código de la cuenta Collection, llama al método generateRoutes para generar dinámicamente la navegación,
4. router/index.js:
① guardia de ruta,
② escribe operaciones asincrónicas en la función router.onReady(), que se usa para actualizar la página en el estado de inicio de sesión para obtener la recopilación de códigos y generar una navegación dinámica;
el código
enrutador/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;
generarRutas.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'
});
}
Después de que login.vue
inicie sesión correctamente, llame al método para generar navegación
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);
.
.
.
})
}
}
Finalizar
Registre el problema aquí, si hay alguna necesidad de modificar, hágamelo saber. Referencia del artículo: el método addRoute de vue-router implementa el control de permisos