Cómo configurar permisos de usuario en VueJS
En aplicaciones front-end que requieren autenticación, a menudo queremos utilizar roles de usuario para determinar qué contenido es visible. Por ejemplo, los visitantes pueden leer el artículo, pero los usuarios registrados o administradores solo pueden ver el botón de edición.
Administrar permisos en el front-end puede ser un poco complicado. Es posible que haya escrito un código como este antes:
if (user.type === ADMIN || user.auth && post.owner === user.id ) {
. ..
} Como alternativa a esta solución, una biblioteca sencilla y ligera, CASL, simplifica mucho la gestión de derechos de usuario. Siempre que haya definido permisos usando CASL y haya configurado el usuario actual, puede cambiar el código anterior para que se vea así:
if (abilities.can('update', 'Post')){< / p>
...
} En esta publicación de blog, le mostraré cómo administrar permisos en una aplicación front-end usando Vue.js y CASL.
Curso intensivo de CASL CASL le permite definir un conjunto de reglas para limitar los recursos que los usuarios pueden ver.
Por ejemplo, las reglas CASL indican qué operaciones CRUD (crear, leer, actualizar, eliminar) puede realizar un usuario en un recurso e instancia determinados (artículo, comentario, etc.).
Supongamos que tenemos una web de anuncios clasificados. Las reglas más obvias son:
Los visitantes pueden ver todos los artículos
Los administradores pueden ver todos los artículos y pueden actualizarlos o eliminarlos
Con CASL, usamos AbilityBuilder para definir reglas. Llamado a definir nuevas reglas. Por ejemplo:
onst { AbilityBuilder } = require('casl');
exportar función(tipo) {
AbilityBuilder.define(can => {
cambiar( tipo) {
caso 'invitado':
can('leer', 'Publicar');
romper
caso 'admin':
can('leer', 'Publicar');
can(['actualizar', 'eliminar'], ' Publicación');
break;
// Añade más caracteres aquí
}
}
};Ahora es posible comprobar los permisos de la aplicación utilizando las reglas definidas.
importar defineAbilitiesFor desde './abilities';
let currentUser = {
id: 999,
nombre: "Julie"
tipo: "registrado",
};
let skills = defineAbilitiesFor(currentUser.type);
Vue.component( {
plantilla: `
Inicia sesión
`,
props: [ 'publicar' ],
calculado: {
showPost() {
return skills.can('read', 'Publicar');
}
}
p>});Curso de demostración Como demostración, creé una aplicación de servidor/cliente para mostrar publicaciones de anuncios clasificados. Las reglas de la aplicación son que los usuarios pueden leer publicaciones o publicar publicaciones, pero solo pueden actualizar o eliminar sus propias publicaciones.
Utilizo Vue.js y CASL para ejecutar y ampliar fácilmente estas reglas, incluso si se agregan nuevas acciones o instancias más adelante.
Ahora, lo guiaré en la creación de esta aplicación.
Definir permisos de usuario Definimos permisos de usuario en resources/ability.js. Una de las ventajas de CASL es que es independiente del entorno, lo que significa que puede ejecutarse tanto en Node como en un navegador.
Para compatibilidad con Node, escribiremos las definiciones de permisos en un módulo CommonJS (Webpack pone este módulo a disposición del cliente).
recursos/capacidad.js
const casl = require('casl');
module.exports = función defineAbilitiesFor(usuario) {
return casl.AbilityBuilder.define(
{ topicName: item => item.type },
can => {
can([' leer', 'crear'], 'Publicar');
can (['actualizar', 'eliminar'], 'Publicar', { usuario: usuario });
}
);
}; Analicemos el código a continuación.
Como segundo parámetro del método define, definimos reglas de permiso llamando a can. El primer parámetro del método es la operación CRUD que desea permitir y el segundo parámetro es el recurso o instancia, en este caso Post.
Tenga en cuenta la segunda llamada can, donde pasamos un objeto como tercer parámetro. Este objeto se utiliza para probar si las propiedades del usuario coinciden con el objeto de usuario que proporcionamos. Si no hacemos esto, no sólo el creador puede eliminar la publicación, sino que cualquiera puede eliminarla directamente.
recursos/capacidad.js
...
casl.AbilityBuilder.define(
...
can => {
can(['leer', 'crear'], 'Publicar');
can(['actualizar', 'eliminar'], ' Post', { usuario: usuario });
}
); CASL necesita saber el tipo de instancia al verificar si la instancia tiene permisos asignados. el método objectName del sujeto como primer parámetro del método definido.
Esto lo logramos devolviendo el tipo en la instancia. Necesitamos asegurarnos de que esta propiedad esté presente al definir el objeto Publicar.
resources/ability.js
...
casl.AbilityBuilder.define(
{ sujetoNombre: elemento => elemento. type },
...
); Finalmente, encapsulamos la definición de permiso en una función, de modo que cuando necesitemos probar permisos, solo necesitemos pasar un usuario. objeto. . Las siguientes funciones serán más fáciles de entender.
recursos/capacidad.js
const casl = require('casl');
module.exports = función defineAbilitiesFor(usuario) {
...
};Reglas de permisos de acceso en Vue Ahora, queremos verificar qué permisos CRUD tiene el usuario sobre los objetos en la aplicación front-end. Necesitamos acceder a las reglas CASL en el componente Vue. El método específico es el siguiente:
Introduzca el complemento Vue y Habilidades. Este complemento agregará CASL al prototipo de Vue para que podamos llamarlo en el componente.
Introduce nuestras reglas en la aplicación Vue (ejemplo: resources/abilities.js).
Definir el usuario actual. En realidad, obtendremos los datos del usuario del servidor y en este ejemplo simplemente los codificaremos en el proyecto.
Tenga en cuenta que el módulo de capacidades exporta una función, a la que llamamos defineAbilitiesFor. Ahora, siempre que podamos, podemos probar un objeto para ver qué permisos tiene el usuario actual.
Agregue el complemento de capacidad para que podamos probarlo en el componente como este: this.$can(...) .
src/main.js
importar Vue desde 'vue';
importar habilidadesPlugin desde '. /ability-plugin';
const defineAbilitiesFor = require('. /resources/ability');
let user = { id: 1, nombre: 'George' };
let habilidad = defineAbilitiesFor(user.id);
Vue.use( habilidadesPlugin, habilidad);Instancias de publicaciones Nuestra aplicación utilizará publicaciones de anuncios clasificados. Estos objetos que representan publicaciones se obtendrán de la base de datos y el servidor los pasará a la interfaz. Por ejemplo:
Necesitamos dos atributos en nuestra instancia de publicación:
El atributo de tipo.
CASL utilizará la devolución de llamada de sujetoNombre en skills.js para verificar la instancia que se está probando.
Propiedades de usuario. Este es el editor. Recuerde, los usuarios solo pueden actualizar y eliminar publicaciones que hayan realizado. Le hemos dicho a CASL quién es el usuario actual definiendo AbilitiesFor(user.id) en main.js. Todo lo que CASL tiene que hacer es verificar si la ID del usuario coincide con el atributo de usuario.
let posts = [
{
tipo: 'Publicación',
usuario: 1,
contenido: 1 gato de segunda mano, en buen estado'
},
{
tipo: 'Publicar',
usuario : 2 ,
contenido: Papel pintado de baño de segunda mano'
}
}
]; El ID es 1. George tiene permisos de actualización y eliminación en la primera publicación, pero no permisos de actualización y eliminación en la segunda publicación.
Las publicaciones de permisos de usuario en el objeto de prueba se muestran en la aplicación a través del componente de publicaciones. Primero eche un vistazo al código, lo explicaré a continuación:
src/components/Post.vue
publicado por
>p>
< style lang="scss">... Haga clic en el botón Eliminar para capturar el clic evento y llamada a la función del controlador.
Usamos CASL para verificar si el usuario actual tiene permisos de operación a través de this.$can('delete', post). Si tienen permiso, continuarán; si no, darán un mensaje de error: "¡Sólo el cartel puede eliminar!"
El servidor mostrará un mensaje de error: "¡Sólo el cartel puede eliminar!" .
Pruebas del lado del servidor En el proyecto real, cuando el usuario se elimina en el front-end, enviaremos el comando de eliminación a la interfaz a través de Ajax, por ejemplo:
src/ componentes/Post.vue
p>if (this.$can('delete', post)) {
axios.get(`/delete/${post.id} `, ).then(res => {
...
});
} El servidor no debe confiar en el cliente para operaciones CRUD, por lo que coloquemos la lógica de prueba CASL en el servidor:
server.js
app.get("/delete/:id", (req, res) => {
let postId = parseInt(req .params.id);
let post = posts.find(post => post.id === postId);
if (ability.can('delete', post )) {
posts = posts.filter(cur => cur !== post);
res.json({ éxito: verdadero });
} else {
res.json({ Success: false });
}
}}) ; CASL es isomórfico, capacidad del servidor. Los objetos se pueden importar desde skills.js, por lo que no necesitamos copiar ningún código.
En este punto, podemos administrar los permisos de los usuarios de una manera muy agradable en una sencilla aplicación Vue.
Creo que esto.$can('delete', post) es mucho más elegante que el siguiente código:
if (user.id === post.user && post. type === 'Post') {
...
} Lo anterior es el contenido que he compilado para usted. Espero que sea útil para su trabajo futuro.
Artículos relacionados:
Utilice el modo singleton para implementar la adición, eliminación, modificación y consulta de datos en JS
Utilice Vue para imitar a Toutiao (tutorial detallado)
Cómo configurar eslint en el desarrollo de React