02 Prefacio
He resumido el esquema de implementación del menú dinámico> implementación del menú dinámico,
pero este artículo es un poco más complicado: se implementa utilizando la tabla de enrutamiento del back-end para devolver la función de inicio de sesión actual. Renderiza el menú;
Hoy explicaré una solución: la tabla de enrutamiento está escrita en el front-end, el back-end devuelve el rol del usuario y el front-end representa el menú correspondiente al rol
Vista previa en línea: github de enrutamiento dinámico
(estrella grabada): https://github.com/Mrblackant…
Antes de comenzar, probablemente debería comprender los métodos de beforeEach (intercepción de ruta), addRoutes y componentes de menú elementUI de vue-router, de lo contrario, puede ser un poco difícil de entender
02 idea
Se divide en los siguientes pasos:
1. El front-end escribe la tabla de enrutamiento localmente, y el rol correspondiente a cada ruta, es decir, qué roles pueden ver este menú / ruta;
2. Al iniciar sesión, solicite el back-end para obtener el rol del usuario conectado (Administrador, usuario ordinario);
3. Utilice la intercepción de ruta, de acuerdo con la función del usuario, compárela con la tabla de enrutamiento local, filtre la ruta correspondiente al usuario y use la ruta para mostrar el menú de la izquierda
03 Implementación
De acuerdo con los 3 pasos anteriores, llevamos a cabo la realización de cada paso
1. El front-end escribe la tabla de enrutamiento localmente
Estamos divididos en dos tablas de enrutamiento, una es fija, como la pantalla de la página de inicio, todos pueden verla, una debe mostrarse dinámicamente de acuerdo con la función del usuario;
aquí usamos el meta atributo del enrutador, escribimos el menú correspondiente aquí : icono, qué roles pueden ver este menú: Roles
Una tabla de enrutamiento completa es la siguiente:
//代码位置：router/index.js
{
path: '',
component: layout, //整体页面的布局(包含左侧菜单跟主内容区域)
children: [{
path: 'main',
component: main,
meta: {
title: '首页', //菜单名称
roles: ['user', 'admin'], //当前菜单哪些角色可以看到
icon: 'el-icon-info' //菜单左侧的icon图标
}
}]
}
2. El usuario inicia sesión y obtiene el rol del usuario
Originalmente, escribí datos simulados, simulé el inicio de sesión del usuario y solicité la interfaz de rol de back-end, pero el simulacro colgó,
así que simulé directamente:
Obtenga el rol de usuario, almacénelo en localStorage y luego vaya a la página de inicio
//代码位置：src/components/reLoad.vue
// axios.post('/temp',this.formModel).then(res=>{})
// 我暂时就不模拟了，直接取
let getUserRole = this.formModel.user === 'admin' ? 'admin' : 'user'
localStorage.setItem('userRole', getUserRole)
this.$router.push({
path: '/main'
})
3. Interceptar rutas beforeEachy filtrar la tabla de enrutamiento correspondiente al rol
Después del segundo paso, hemos obtenido el rol del usuario, en este momento podemos obtenerlo en el lugar de intercepción de ruta,
Después de obtenerlo, combinando la ruta que escribimos en el paso 1, utilizando el filtermétodo de matriz , compare el rol con metalos rolessdatos en la etiqueta en la tabla de enrutamiento
Después de filtrar, tome la ruta actual para mostrar el menú a la izquierda. Este paso se puede implementar con vuex. Me preocupa que algunos amigos no lo entiendan, por lo que utilizo una global(variable global)
Prestar especial atención a la interceptación ruta de aquí, es fácil caer en un bucle infinito, por lo que sugiero que primero mirada beforeEachy addRoutesel mecanismo de funcionamiento
//代码位置：src/permission.js
router.beforeEach((to, from, next) => {
// 取到用户的角色
let GetRole = localStorage.getItem("userRole")
// 如果登录了
if (GetRole !== 'unload') {
next() //next()方法后的代码也会执行
// 1.如果路由表 没根据角色进行筛选,就筛选一次
if (!addRouFlag) {
addRouFlag = true
// 2.根据用户的角色、和需要动态展示的路由，生成符合用户角色的路由
var getRoutes = baseRoleGetRouters(permissionRouter, GetRole.split(","))
// 3.利用global属性，让渲染菜单的组件sideMeuns.vue重新生成左侧菜单
global.antRouter = fixedRouter.concat(getRoutes)
// 4.将生成好的路由addRoutes
router.addRoutes(fixedRouter.concat(getRoutes))
// 5.push之后，会重新进入到beforeEach的钩子里,直接进入第一个if判断
router.push({ path: to.path })
}
} else {
// 用户没登录，跳转到登录页面
if (to.path === '/') {
next()
} else {
next('/')
}
}
})
Una vez finalizado todo el proceso, es fácil ser confuso.
1) Visualización de menú basada en enrutamiento
Ubicación del código: /src/components/sideMeuns.vue,
primero mire el componente del menú elementUI, primero comprenda algunos parámetros básicos,
aquí escribí la representación del menú como un componente: el
uso de atributos recursivos para garantizar que pueda generar menús de niveles múltiples,
sugiero que no esté familiarizado con él Primero simule para escribir un menú que incluya la función de salto y la visualización de iconos, y luego mire los componentes que escribí
2) El usuario sale del sistema
Ubicación del código: /src/components/layout.vue
cuando cierre sesión, recuerde borrar la función de usuario que existe en localStorage
y luego use window.location.href = "/" para saltar a la página de inicio de sesión,
¿Por qué usar location.href? Esto borrará la ruta anterior de addRoutes y garantizará que el menú correcto se vuelva a representar después de que el siguiente usuario inicie sesión
Si algunos lugares no entienden, no entiendo los hermanos sugerido que el primer punto para separar a correr,
o mirar el origen de la idea de este artículo: manos a la ...
Si hay algo mal, espero que tus amigos puedan corregirme
Nota:
Siga la documentación, pero después de actualizar la página, se informa un error, Error en antes de crear hook: "RangeError: Tamaño máximo de pila de llamadas excedido", ¿cómo lidiar con esto?
Presta atención para mirar aquí y agregar juicio,不要一直进入beforeEach里边的添加路由方法
