1. ¿Qué es la gestión de derechos?
La gestión de permisos en aplicaciones web generalmente se refiere a que los usuarios pueden acceder y solo acceder a los recursos que se les asignan de acuerdo con la configuración del sistema y los permisos de la aplicación asignados a un rol determinado. La gestión de derechos aparece en casi cualquier sistema, especialmente en los sistemas de gestión de fondo web.
2. Clasificación de la gestión de autoridades.
-
Permisos de backend
La gestión de autoridad gira principalmente en torno a los datos, y el núcleo es el cambio de datos en el servidor, por lo que el backend es generalmente la clave para la autoridad. El backend le dice al frontend qué autoridad tiene el usuario y luego el frontend se la asigna al usuario. Entonces, durante mucho tiempo, los permisos siempre han sido un tema a considerar por los programas de back-end. Sin embargo, con la popularidad del modelo de desarrollo de separación de front-end y back-end, cada vez más proyectos también están ingresando al control de autoridad de front-end.
-
Permisos de front-end
En esencia, el control de los permisos del front-end es controlar la visualización de las páginas del front-end y las solicitudes enviadas por el front-end. Pero solo el control de permisos del front-end debe depender del soporte del back-end. Solo se puede decir que el control de permisos de front-end logra el efecto de la guinda del pastel: puede optimizar la lógica de la interfaz, simplificar la complejidad del proyecto, mejorar la eficiencia de la operación del proyecto, reducir la presión del servidor, etc. Por lo tanto, el control de permisos también es un punto de conocimiento importante. en la parte delantera.
3. El significado de los permisos de front-end
-
Reducir la posibilidad de operaciones ilegales por parte de los usuarios.
-
Mejorar la experiencia del usuario, el botón de menú sin permiso no se muestra
-
Intercepte solicitudes innecesarias y reduzca la presión sobre el servidor.
4. Ideas de implementación de la gestión de autoridades front-end.
Control de menú: después de que la solicitud de inicio de sesión sea exitosa, se obtendrán los datos de permiso. Por supuesto, esto debe discutir el formato de los datos devueltos con el backend. La interfaz muestra el menú correspondiente de acuerdo con los datos de permiso. Haga clic en el menú para ver la interfaz correspondiente.
Control de interfaz: hay dos tipos de control de interfaz: el primero es que el usuario ingresa la dirección del proyecto de la página sin inicio de sesión en la barra de direcciones antes de iniciar sesión. En este momento, la interceptación de acceso debe redirigirse al inicio de sesión. página. La segunda es para diferentes usuarios. Algunas páginas específicas propiedad de usuarios específicos no deben presentarse al usuario, incluso si ingresa ilegalmente la dirección que ve. Si ingresa una dirección ilegal, debe ser redirigido a la página 404.
Control de botones: diferentes usuarios tienen diferentes permisos para operar los botones. El primer tipo de usuarios solo puede ver los datos, pero no puede cambiarlos. Algunos usuarios tienen la función de agregar, eliminar, modificar y verificar los datos, por lo que cuando el mismo El botón no tiene permiso, deberíamos estar ocultos o deshabilitados para él. La segunda es que hay varias pestañas en una página y también deberíamos mostrarlas de manera diferente según los diferentes permisos.
Control de solicitudes y respuestas:
Las solicitudes y respuestas más allá de los permisos del usuario son innecesarias para el sistema, lo que provocará una sobrecarga innecesaria del servidor y costos de tiempo. Dichas solicitudes y respuestas deben controlarse para que no se puedan enviar en absoluto, como un botón de editor, porque no hay permiso. , el botón actual está deshabilitado en la página, pero si el usuario abre la consola y establece a la fuerza el atributo deshabilitado del botón en verdadero, los usuarios sin permiso aún pueden operar este botón en este momento, aunque puede estar en segundo plano. Eventualmente será interceptado, pero la experiencia del usuario no es muy buena, por lo que aún necesitamos interceptar las solicitudes actualmente ilegales.
5. Enrutamiento dinámico (relacionado con el menú)
Introducción al enrutamiento dinámico: el dinámico no está codificado, sino variable. Podemos cargar las rutas correspondientes de acuerdo con los permisos existentes. No cargaremos las rutas sin permisos para evitar el desperdicio de recursos. También es un punto de optimización para el proyecto. El uso de enrutamiento dinámico se usa generalmente en combinación con el control de permisos de rol.
Ventajas del enrutamiento dinámico:
-
Seguridad, cuando el usuario introduce manualmente una dirección sin permiso para entrar en una determinada página, será redirigido automáticamente al 404, sin que tengamos que controlarlo por separado en el guardia de enrutamiento
-
Flexible, puedes configurar el aumento y disminución del menú, para no tener que lidiar con él cada vez que lo modificas. Se agregan menús posteriores y el enrutamiento se procesa de manera uniforme, lo cual es conveniente y rápido.
6. Realización de funciones
Aquí usaré una demostración como ejemplo. En la demostración, se implementarán los cuatro aspectos de menú , interfaz , botón y solicitud . La pila de tecnología de demostración se implementa mediante vue2+vue-router+element-ui y los datos de fondo. es simulado por mock.js.
Método 1 (sin utilizar enrutamiento dinámico)
La idea general de implementación aquí es asignar un código único a cada menú y botón del menú, y luego el fondo devuelve el conjunto de tablas de permisos de código del usuario de rol correspondiente, y la interfaz obtiene la tabla de permisos de código para el procesamiento de detección.
Hay dos roles de usuario en la demostración, uno es administrador (superadministrador), que tiene todos los permisos, y el otro es prueba (administrador normal), que tiene algunos permisos.
Después de que el usuario inicia sesión, el servidor devuelve un dato, que tiene la tabla de códigos de permiso (permiso) y el token correspondiente al rol.
Después de iniciar sesión correctamente, primero obtenemos los datos y los almacenamos en vuex, y luego los usamos, pero encontramos un problema: después de actualizar la página, los datos de vuex desaparecerán.
Motivo: los datos en vuex se almacenan en la memoria en ejecución. Cuando se actualiza la página, la página recargará la instancia de vue y los datos en vuex se reasignarán al valor inicial.
Solución: guarde los datos en almacenamiento local, almacenamiento de sesiones o cookies (porque se almacenan en el navegador, lo que equivale a almacenarlos en el disco duro; si no se borran activamente, siempre existirán) y manténgalos sincronizados con vuex.
- Control de menú : compare la tabla de códigos devueltos con el objeto del enrutador, cada objeto del enrutador tiene un atributo roleCode, que representa el menú actual
Aquí usamos un método para filtrar. Este método pasa la tabla de códigos actual y todos los objetos del enrutador, y finalmente devuelve un nuevo objeto de enrutamiento que cumple con los permisos del código. La inicialización del menú a la izquierda es el objeto del enrutador completo, es decir, tiene todos los menús del menú, ahora después del filtrado, solo se devuelven los menús del menú con permisos para el rol actual
El inicio de sesión es exitoso y se obtiene el siguiente menú filtrando según el método anterior
Después de esto, el módulo de menú parece estar listo, pero de hecho, si lo actualizamos, encontraremos que el menú que acaba de filtrar se restaurará en todos los menús y el método de filtrado de menús no es válido.
Motivo: la ruta de filtrado de rutas se llama solo después de que el inicio de sesión es exitoso y no se llama cuando se actualiza, por lo que la ruta no se agrega después de la actualización.
Solución: puede llamar al método para agregar una ruta del menú de filtro creado en app.vue
- Control de interfaz: dado que no se utiliza ningún método de enrutamiento dinámico, todas las rutas en el proyecto están realmente registradas, por lo que incluso si el menú correspondiente no se muestra en la página, ingresamos la URL que no tiene este permiso en la barra de direcciones. Aún podemos ingresar a esta página, por lo que debemos controlar los permisos de la interfaz a continuación.
usuario administrador
usuario de prueba
El usuario de prueba no tiene una función para administrar todo el módulo.
Entonces necesitamos agregar un paso más aquí, que es interceptar en la guardia frontal de enrutamiento. Si se considera que no existe tal permiso, se debe redirigir a la página 404.
Solución: Dale un tramo lateral en la guardia delantera de la ruta, si tienes permiso para dejarlo pasar, si no tienes permiso, ve directamente al 404.
Pregunta: Pensé que esto estaría bien, pero el problema volvió. Cuando intenté acceder a un módulo de rol que no existe para el usuario de prueba, ingresé la dirección en la barra de direcciones, pero terminé en un bucle sin fin.
Así que verifiqué la información y descubrí que este problema en realidad se debe a la falta de comprensión del enrutador. Antes de cada mecanismo operativo de vue-router
Solución: basándonos en todo el mecanismo, modifiquémoslo.
Enlace de amistad: el bucle infinito de Vue-router puede consultar este blog https://blog.csdn.net/weixin_45306532/article/details/114434748
Una vez completadas las operaciones anteriores, la parte del menú está realmente, realmente, realmente terminada. Ingrese una dirección ilegal e ingrese 404.
- Permisos de botones: ahora el usuario puede ver algunas interfaces con permisos, pero es posible que algunos botones y pestañas de esta interfaz no tengan permisos para el usuario.
- Procesamiento de botones: el botón para el que el usuario no tiene permiso se oculta o deshabilita, y en la implementación de esta pieza, la lógica se puede colocar en la instrucción personalizada.
a: Cree un nuevo archivo permiso.js y registre instrucciones personalizadas
b.main.js presenta permiso.js
C. Agregue una instrucción personalizada en el botón y pase el código correspondiente al botón actual a la instrucción personalizada.
2. Procesamiento de pestañas: realice filtrado de pestañas en el cálculo del componente de la página actual
Hay un atributo de rol en los datos de configuración de a.tabs, correspondiente al permiso actual
b. Se procesa el cálculo del componente de nivel de usuario/gestión de usuarios.
Una vez completadas las operaciones anteriores, el efecto del usuario de prueba es el siguiente
usuario de prueba
usuario administrador
- Control de solicitud de interfaz: actualmente, los permisos de la interfaz generalmente se verifican en forma de jwt. Si falla, generalmente devuelve 401, salta a la página de inicio de sesión para iniciar sesión nuevamente, obtiene el token después de iniciar sesión, guarda el token e intercepta a través del interceptor de solicitudes axios .
En este punto, el control a nivel de botón ha terminado.
Método 2 (usando enrutamiento dinámico)
Este método agrega enrutamiento dinámico basado en la autoridad del menú del primer método.
En mi enrutador, solo están reservadas la página de inicio/inicio, la página de inicio de sesión/inicio de sesión y la página 404, porque todos los usuarios que inician sesión en estas páginas tienen permiso para verlas.
enrutador/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/login/index.vue'
import Layout from '@/components/Layout.vue'
import NotFound from '@/components/NotFound.vue'
// isShow属性:el-menu树要不要渲染
// isMenuItem:el-menu树有没有字节点
Vue.use(Router)
const router = new Router({
routes: [
{
path: '/',
redirect: '/home',
isShow: true,
authName: '首页',
isMenuItem: true,
component: Layout,
meta: {
roleCode: 'home'
},
children: [
{
id: 110,
meta: {
roleCode: ''
},
authName: '项目权限介绍',
path: '/home',
component: (resolve) => require(['@/views/home'], resolve)
}
]
},
{
path: '/login',
component: Login,
isShow: false
},
{
isShow: false,
path: '*',
component: NotFound
},
{
isShow: false,
path: '/404',
component: NotFound
}
]
})
// 筛选有权限的菜单
export function filterRoute(arr, arr1) {
const realRoutes = []
arr.forEach((v) => {
// console.log(v, 'vvv')
if (!v.meta.roleCode) {
realRoutes.push(v)
}
arr1.forEach(item => {
if (item === v.meta.roleCode) {
if (v.children && v.children.length > 0) {
v.children = filterRoute(v.children, arr1)
}
realRoutes.push(v)
}
})
})
return realRoutes
};
router.beforeEach((to, from, next) => {
console.log(router.options.routes, 'over111')
if (to.path === '/login') {
next()
} else {
const token = sessionStorage.getItem('token')
if (!token) {
next('/login')
} else {
// 筛选权限
next()
}
}
})
export default router
Además, coloco todos los enrutadores en otro archivo js para juzgar los permisos y registro dinámicamente aquellos con permisos para ingresar al objeto de enrutamiento del enrutador.
enrutador/routingArray.js
import Layout from '@/components/Layout.vue'
const router = [
{
id: 125,
authName: '用户管理',
path: '/User',
name: 'User',
redirect: '/User/Userlist',
icon: 'icon-user',
meta: {
roleCode: 'user'
},
isMenuItem: false,
isShow: true,
component: Layout,
children: [
{
id: 110,
isMenuItem: true,
meta: {
roleCode: 'userlist'
},
authName: '用户列表',
path: '/User/Userlist',
name: 'Userlist',
component: (resolve) => require(['@/views/user/userlist.vue'], resolve)
},
{
id: 120,
isMenuItem: true,
meta: {
roleCode: 'usergrade'
},
authName: '用户等级',
path: '/User/Usergrade',
component: (resolve) => require(['@/views/user/usergrade.vue'], resolve)
}
]
},
{
isShow: true,
isMenuItem: false,
id: 103,
path: '/Roles',
name: 'Roles',
meta: {
roleCode: 'roles'
},
authName: '角色管理',
redirect: '/Roleslist',
icon: 'icon-tijikongjian',
component: Layout,
children: [
{
id: 111,
isShow: true,
isMenuItem: true,
meta: {
roleCode: 'roleslist'
},
authName: '角色列表',
path: '/Roleslist',
component: (resolve) => require(['@/views/role/rolelist.vue'], resolve)
}
]
}
]
export default router
Realizar procesamiento después de iniciar sesión exitosamente
Nota: Después de la versión vue-router4.x , se abandonó router.addRoutes y el oficial se cambió a external.addRoute, y es necesario inyectar múltiples inyecciones dinámicas secuencialmente en un bucle.
Después de la actualización, al igual que el método 1, llame al método para agregar enrutamiento del menú de filtro creado en app.vue para evitar la invalidación de la actualización.
Este es el final de la introducción del segundo método. Los permisos de página, botón , solicitud y respuesta son los mismos que los del primer método.
Siete: ejercicio de plantilla
La plantilla de demostración se subió a la nube de código la última vez. Aquellos que la necesiten pueden obtenerla ellos mismos. No es fácil hacerlo. Haga clic en una estrella libre y mantenga los puños apretados. Si no hay suficiente, de nada. para agregarlo.