analizar
Las preguntas de práctica integrales, en el desarrollo real, a menudo deben enfrentar las necesidades de la gestión de autoridad y examinar la capacidad de aplicación real.
Hay dos requisitos generales para la gestión de autoridad: autoridad de página y autoridad de botón, que se pueden analizar desde estos dos aspectos.
tren de pensamiento
1. Análisis de requisitos de gestión de permisos: permisos de página y botón
2. Esquema de implementación de la gestión de derechos: dividido en esquema de back-end y esquema de front-end
3. Sus respectivas ventajas y desventajas
práctica
1. El requisito general de la gestión de la autoridad es la gestión de la autoridad de la página y la autoridad del botón.
2. Existen dos soluciones: backend y frontend para implementación específica:
La solución front-end configurará toda la información de enrutamiento en el front-end y requerirá que los usuarios inicien sesión a través de la protección de enrutamiento. Después de que el usuario inicie sesión, la tabla de enrutamiento se filtrará de acuerdo con el rol . Por ejemplo, configuraré una matriz asyncRoutes , agregaré un campo de roles en el meta de la ruta para la página que necesita autenticación y tomaré la intersección de los dos después de obtener el rol de usuario.Si el resultado no está vacío, significa que se puede acceder. Una vez finalizado el proceso de filtrado, las rutas restantes son las páginas a las que el usuario puede acceder.Finalmente , las rutas se pueden agregar dinámicamente a través de router.addRoutes(accessRoutes) .
La solución de back-end almacenará toda la información de enrutamiento de la página en la base de datos. Cuando el usuario inicie sesión, consultará toda la información de enrutamiento de la página a la que puede acceder de acuerdo con su rol y la devolverá al front-end. El front-end luego agregue dinámicamente información de enrutamiento a través de addRoutes
El control de los permisos del botón generalmente implementa un comando , como v-permission, y el rol requerido por el botón se pasa al comando v-permission por valor. En el gancho montado del comando, se puede juzgar si el usuario actual El rol y el botón se superponen y, si lo hay, el botón se reserva. Ninguno para eliminar el botón.
3. La ventaja de la solución front-end pura es que es simple de implementar y no requiere páginas de administración de permisos adicionales, pero es relativamente problemática de mantener. Si hay nuevos requisitos de página y rol, el código front-end debe ser modificado y reempaquetado para la implementación; la solución del lado del servidor no tiene este problema. A través de la página de administración de autoridad y función especial, configure la información de autoridad de página y botón en la base de datos, y la aplicación obtendrá la información de enrutamiento más reciente cada vez que inicia sesión, ¡lo cual se puede decir que es de una vez por todas!
¿Cómo agregar la información de enrutamiento devuelta por el servidor al enrutador?
// 前端组件名和组件映射表
const map = {
//xx: require('@/views/xx.vue').default // 同步的⽅式
xx: () => import('@/views/xx.vue') // 异步的⽅式
}
// 服务端返回的asyncRoutes
const asyncRoutes = [
{ path: '/xx', component: 'xx',... }
]
// 遍历asyncRoutes，将component替换为map[component]
function mapComponent(asyncRoutes) {
asyncRoutes.forEach(route => {
route.component = map[route.component];
if(route.children) {
route.children.map(child => mapComponent(child))
}
})
}
mapComponent(asyncRoutes)