Primero, puede usar instrucciones personalizadas para implementar permisos a nivel de botón basados en el nombre de inicio de sesión.
Primero, cree un nuevo directorio de directivas en el directorio src y cree dos archivos js más en el directorio
. El código en el archivo index.js es como sigue:
import permission from './permission'
// 全局注册自定义指令
const install = function(Vue) {
Vue.directive('permission', permission)
}
if (window.Vue) {
window['permission'] = permission
Vue.use(install); // eslint-disable-line
}
permission.install = install
export default permission
El código en el archivo allow.js es el siguiente:
export default{
inserted(el, binding, vnode) {
/*el: 指令所绑定的元素，可以用来直接操作DOM。
binding: 一个对象，包含指令的很多信息。
vnode: Vue编译生成的虚拟节点。*/
const {
value } = binding
// 自定义指令的执行函数，，取到登录缓存的按钮权限数组，赋值给全局对象userMsg
global.ButtonPermissions = JSON.parse(sessionStorage.getItem('ButtonPermissions'))
if (global.ButtonPermissions && global.ButtonPermissions.indexOf(value) < 0) {
el.style.display = 'none'
}
}
}
Comando personalizado Vue.directive: Este comando puede escribir un evento personalizado *
Los tres parámetros pasados en el comando personalizado
el: El elemento vinculado por el comando se puede usar para manipular directamente el DOM.
vinculante: un objeto que contiene mucha información sobre la instrucción.
vnode: el nodo virtual generado por la compilación de Vue.
El ciclo de vida de
una instrucción personalizada Una instrucción personalizada tiene cinco ciclos de vida (también llamados funciones de enlace), que son vincular, insertar, actualizar, actualizar componente y desvincular
vincular: solo se llama una vez, la primera vez que la instrucción se vincula al elemento, use Esta función de gancho puede definir una acción de inicialización que se ejecuta una vez durante la vinculación.
1 insertado: se llama cuando el elemento vinculado se inserta en el nodo principal (se puede llamar al nodo principal, no necesariamente en el documento).
2 actualización: se llama cuando se actualiza la plantilla que está vinculada al elemento, independientemente de si cambia el valor vinculado. Al comparar los valores vinculantes antes y después de la actualización, se pueden ignorar las actualizaciones de plantilla innecesarias.
3 componentUpdated: se llama cuando la plantilla donde se encuentra el elemento vinculado ha completado un ciclo de actualización.
4 desvincular: se llama solo una vez, se llama cuando la instrucción se desvincula del elemento.
Finalmente, las instrucciones personalizadas se introducen en el archivo de entrada src \ main.js.
import Permission from './directive/permission'
Vue.use(Permission)
Al iniciar sesión, de acuerdo con el nombre de inicio de sesión para obtener los permisos de botón que tiene el usuario
methods: {
submitForm() {
this.$refs.login.validate(valid => {
if (valid) {
//this.param 为用户名称和密码
login(this.param).then(response => {
if (response.data.code != 200){
this.$message.error(response.data.msg);
}else{
this.$message.success(response.data.msg);
localStorage.setItem('token', response.data.data);
localStorage.setItem('username', this.param.username);
//根据登录名称去获取改用户他拥有哪些按钮权限
getPermissions(this.param).then(response=>{
let arr=[];
response.data.data.forEach(aa=>{
//value为对象中的按钮权限字段
arr.push(aa.value);
})
global.ButtonPermissions =arr;
//将获取的按钮权限数组放入sessionStorage缓存中
sessionStorage.setItem("ButtonPermissions",JSON.stringify(global.ButtonPermissions));
})
//跳转首页
this.$router.push('/dashboard');
}
})
} else {
this.$message.error('请输入账号和密码');
console.log('error submit!!');
return false;
}
});
},
Efecto 1: En la matriz global.ButtonPermissionss
Efecto 2: En la caché de sessionStorage
Envíe una solicitud en login.js:
export const getPermissions = query => {
return request({
url: 'http://localhost:8080/permission/getPermissions',
method: 'post',
params: query
});
};
El controlador de fondo recibe:
//获取权限值做按钮级别
@PostMapping("getPermissions")
public ResultObj getPermissions (String username){
//获取改名称下有哪些按钮权限
List<Permission> permissionList = permissionService.getPermissions(username);
return ResultObj.success(permissionList);
}
Escriba dos consultas de tabla en el archivo PermissionMapper.xml:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.fh.permission.mapper.PermissionMapper">
<select id="getPermissions" parameterType="java.lang.String" resultType="com.fh.permission.model.Permission">
select p.value from ums_admin a JOIN ums_permission p ON a.id=p.pid where a.username=#{
username}
</select>
</mapper>
En el archivo de página específico, puede usar el comando v-permiso para mostrar y ocultar botones según los diferentes usuarios.
Visualización del efecto original 
Después de la visualización del efecto de realización:
