vue要做权限管理该怎么做？接口权限、按钮权限、菜单权限、路由权限

最新推荐文章于 2024-09-24 18:00:47 发布

o-h-

最新推荐文章于 2024-09-24 18:00:47 发布

阅读量3.8k

点赞数 6

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_66983971/article/details/126269260

版权

本文介绍了Vue前端权限控制的四个方面：接口权限通过JWT验证；按钮权限利用后端数据和v-if/v-directive实现；菜单权限提供两种方案，分离或集成路由；路由权限则涉及全局路由守卫与权限校验。文章详细阐述了各种权限的实现方法和优缺点。

摘要由CSDN通过智能技术生成

1、前端权限控制可以分为四个方面：

接口权限
按钮权限
菜单权限
路由权限

1-1、接口权限

接口权限目前一般采用jwt的形式来验证，没有通过的话一般返回401，跳转到登录页面重新进行登录，登录完拿到token，将token存起来，通过axios请求拦截器进行拦截，每次请求的时候头部携带token。

axios.interceptors.request.use(config => {
   
    config.headers['token'] = cookie.get('token')
    return config
})
axios.interceptors.response.use(res=>{
   },{
   response}=>{
   
    if (response.data.code === 40099 || response.data.code === 40098) {
    //token过期或者错误
        router.push('/login')
    }
})

1-2、按钮权限

前端对于按钮级别权限的控制方法：根据后端返回的权限数据来实现不同权限的用户展示不同的操作按钮。实现方法有两种：定义一个全局方法配合 v-if 指令、自定义指令。

首先，将接口返回的权限数据保存到 localStorage 里。我们这里以下面的格式为例：

let permissions = ['add', 'edit', 'cancel', 'confirm', 'delete', 'detail', 'search', 'download', 'back']

（1）、定义一个全局方法配合 v-if 指令
在 utils 文件夹创建一个 permission.js 文件

//先获取本地权限数据 permissions 
let btnPermission = (data) => {
   
	let permissions = JSON.parse(localStorage.getItem('permissions '));
	let isHave = permissions.includes(data);
	return isHave;
}
export default btnPermission;

在 main.js 里面引入

import btnPermission from './utils/btnPermission.js';
Vue.prototype.$has = btnPermission;

然后在页面上直接使用

<template>
	<div>
		<button v-if='$has('add')'>新增</button>
		<button v-if='$has('edit')'>编辑</button>
		<button v-if='$has('delete')'>删除</button>
	</div>
</template>

（2）、自定义指令
在 directive 文件夹下面定义一个 permission.js 文件

//先获取本地权限数据 permissions 
import Vue from 'vue';
let has = {
   
	install(Vue){
   
		Vue.directive('has',{
   
			bind(el,binding,vnode){
   
				let {
   value} = binding;
				//判断是否有权限
				let hasBtn = permissions.includes(value);
				//没有权限则删除父元素，或者隐藏当前元素
				if (!hasBtn) {
   
			        if (!el.parentNode