vue要做权限管理该怎么做？如果控制到按钮级别的权限怎么做？

面试官：vue要做权限管理该怎么做？如果控制到按钮级别的权限怎么做？

一、是什么

权限是对特定资源的访问许可，所谓权限控制，也就是确保用户只能访问到被分配的资源

而前端权限归根结底是请求的发起权，请求的发起可能有下面两种形式触发

  • 页面加载触发
  • 页面上的按钮点击触发

总的来说，所有的请求发起都触发自前端路由或视图

所以我们可以从这两方面入手，对触发权限的源头进行控制，最终要实现的目标是：

  • 路由方面，用户登录后只能看到自己有权访问的导航菜单，也只能访问自己有权访问的路由地址，否则将跳转 4xx 提示页

  • 视图方面，用户只能看到自己有权浏览的内容和有权操作的控件

  • 最后再加上请求控制作为最后一道防线，路由可能配置失误，按钮可能忘了加权限，这种时候请求控制可以用来兜底，越权请求将在前端被拦截

二、如何做

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

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

接口权限

接口权限目前一般采用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')}
})

路由权限控制

方案一

初始化即挂载全部路由，并且在路由上标记相应的权限信息，每次路由跳转前做校验

const routerMap = [{path: '/permission',component: Layout,redirect: '/permission/index',alwaysShow: true, // will always show the root menumeta: {title: 'permission',icon: 'lock',roles: ['admin', 'editor'] // you can set roles in root nav},children: [{path: 'page',component: () => import('@/views/permission/page'),name: 'pagePermission',meta: {title: 'pagePermission',roles: ['admin'] // or you can only set roles in sub nav}}, {path: 'directive',component: () => import('@/views/permission/directive'),name: 'directivePermission',meta: {title: 'directivePermission'// if do not set roles, means: this page does not require permission}}]}]

这种方式存在以下四种缺点：

  • 加载所有的路由，如果路由很多，而用户并不是所有的路由都有权限访问，对性能会有影响。

  • 全局路由守卫里，每次路由跳转都要做权限判断。

  • 菜单信息写死在前端，要改个显示文字或权限信息，需要重新编译

  • 菜单跟路由耦合在一起，定义路由的时候还有添加菜单显示标题，图标之类的信息，而且路由不一定作为菜单显示，还要多加字段进行标识

方案二

初始化的时候先挂载不需要权限控制的路由，比如登录页，404等错误页。如果用户通过URL进行强制访问，则会直接进入404，相当于从源头上做了控制

登录后，获取用户的权限信息，然后筛选有权限访问的路由，在全局路由守卫里进行调用addRoutes添加路由

import router from './router'
import store from './store'
import { Message } from 'element-ui'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css'// progress bar style
import { getToken } from '@/utils/auth' // getToken from cookieNProgress.configure({ showSpinner: false })// NProgress Configuration// permission judge function
function hasPermission(roles, permissionRoles) {if (roles.indexOf('admin') >= 0) return true // admin permission passed directlyif (!permissionRoles) return truereturn roles.some(role => permissionRoles.indexOf(role) >= 0)
}const whiteList = ['/login', '/authredirect']// no redirect whitelistrouter.beforeEach((to, from, next) => {NProgress.start() // start progress barif (getToken()) { // determine if there has token/* has token*/if (to.path === '/login') {next({ path: '/' })NProgress.done() // if current page is dashboard will not trigger	afterEach hook, so manually handle it} else {if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息store.dispatch('GetUserInfo').then(res => { // 拉取user_infoconst roles = res.data.roles // note: roles must be a array! such as: ['editor','develop']store.dispatch('GenerateRoutes', { roles }).then(() => { // 根据roles权限生成可访问的路由表router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record})}).catch((err) => {store.dispatch('FedLogOut').then(() => {Message.error(err || 'Verification failed, please login again')next({ path: '/' })})})} else {// 没有动态改变权限的需求可直接next() 删除下方权限判断 ↓if (hasPermission(store.getters.roles, to.meta.roles)) {next()//} else {next({ path: '/401', replace: true, query: { noGoBack: true }})}// 可删 ↑}}} else {/* has no token*/if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入next()} else {next('/login') // 否则全部重定向到登录页NProgress.done() // if current page is login will not trigger afterEach hook, so manually handle it}}
})router.afterEach(() => {NProgress.done() // finish progress bar
})

按需挂载，路由就需要知道用户的路由权限，也就是在用户登录进来的时候就要知道当前用户拥有哪些路由权限

这种方式也存在了以下的缺点：

  • 全局路由守卫里，每次路由跳转都要做判断
  • 菜单信息写死在前端，要改个显示文字或权限信息，需要重新编译
  • 菜单跟路由耦合在一起，定义路由的时候还有添加菜单显示标题，图标之类的信息，而且路由不一定作为菜单显示，还要多加字段进行标识

菜单权限

菜单权限可以理解成将页面与理由进行解耦

方案一

菜单与路由分离，菜单由后端返回

前端定义路由信息

{name: "login",path: "/login",component: () => import("@/pages/Login.vue")
}

name字段都不为空，需要根据此字段与后端返回菜单做关联，后端返回的菜单信息中必须要有name对应的字段，并且做唯一性校验

全局路由守卫里做判断

function hasPermission(router, accessMenu) {if (whiteList.indexOf(router.path) !== -1) {return true;}let menu = Util.getMenuByName(router.name, accessMenu);if (menu.name) {return true;}return false;}Router.beforeEach(async (to, from, next) => {if (getToken()) {let userInfo = store.state.user.userInfo;if (!userInfo.name) {try {await store.dispatch("GetUserInfo")await store.dispatch('updateAccessMenu')if (to.path === '/login') {next({ name: 'home_index' })} else {//Util.toDefaultPage([...routers], to.name, router, next);next({ ...to, replace: true })//菜单权限更新完成,重新进一次当前路由}}  catch (e) {if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入next()} else {next('/login')}}} else {if (to.path === '/login') {next({ name: 'home_index' })} else {if (hasPermission(to, store.getters.accessMenu)) {Util.toDefaultPage(store.getters.accessMenu,to, routes, next);} else {next({ path: '/403',replace:true })}}}} else {if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入next()} else {next('/login')}}let menu = Util.getMenuByName(to.name, store.getters.accessMenu);Util.title(menu.title);
});Router.afterEach((to) => {window.scrollTo(0, 0);
});

每次路由跳转的时候都要判断权限，这里的判断也很简单，因为菜单的name与路由的name是一一对应的，而后端返回的菜单就已经是经过权限过滤的

如果根据路由name找不到对应的菜单，就表示用户有没权限访问

如果路由很多，可以在应用初始化的时候，只挂载不需要权限控制的路由。取得后端返回的菜单后，根据菜单与路由的对应关系，筛选出可访问的路由，通过addRoutes动态挂载

这种方式的缺点：

  • 菜单需要与路由做一一对应，前端添加了新功能，需要通过菜单管理功能添加新的菜单，如果菜单配置的不对会导致应用不能正常使用
  • 全局路由守卫里，每次路由跳转都要做判断
方案二

菜单和路由都由后端返回

前端统一定义路由组件

const Home = () => import("../pages/Home.vue");
const UserInfo = () => import("../pages/UserInfo.vue");
export default {home: Home,userInfo: UserInfo
};

后端路由组件返回以下格式

[{name: "home",path: "/",component: "home"},{name: "home",path: "/userinfo",component: "userInfo"}
]

在将后端返回路由通过addRoutes动态挂载之间，需要将数据处理一下，将component字段换为真正的组件

如果有嵌套路由，后端功能设计的时候，要注意添加相应的字段，前端拿到数据也要做相应的处理

这种方法也会存在缺点：

  • 全局路由守卫里，每次路由跳转都要做判断
  • 前后端的配合要求更高

按钮权限

方案一

按钮权限也可以用v-if判断

但是如果页面过多，每个页面页面都要获取用户权限role和路由表里的meta.btnPermissions，然后再做判断

这种方式就不展开举例了

方案二

通过自定义指令进行按钮权限的判断

首先配置路由

{path: '/permission',component: Layout,name: '权限测试',meta: {btnPermissions: ['admin', 'supper', 'normal']},//页面需要的权限children: [{path: 'supper',component: _import('system/supper'),name: '权限测试页',meta: {btnPermissions: ['admin', 'supper']} //页面需要的权限},{path: 'normal',component: _import('system/normal'),name: '权限测试页',meta: {btnPermissions: ['admin']} //页面需要的权限}]
}

自定义权限鉴定指令

import Vue from 'vue'
/**权限指令**/
const has = Vue.directive('has', {bind: function (el, binding, vnode) {// 获取页面按钮权限let btnPermissionsArr = [];if(binding.value){// 如果指令传值，获取指令参数，根据指令参数和当前登录人按钮权限做比较。btnPermissionsArr = Array.of(binding.value);}else{// 否则获取路由中的参数，根据路由的btnPermissionsArr和当前登录人按钮权限做比较。btnPermissionsArr = vnode.context.$route.meta.btnPermissions;}if (!Vue.prototype.$_has(btnPermissionsArr)) {el.parentNode.removeChild(el);}}
});
// 权限检查方法
Vue.prototype.$_has = function (value) {let isExist = false;// 获取用户按钮权限let btnPermissionsStr = sessionStorage.getItem("btnPermissions");if (btnPermissionsStr == undefined || btnPermissionsStr == null) {return false;}if (value.indexOf(btnPermissionsStr) > -1) {isExist = true;}return isExist;
};
export {has}

在使用的按钮中只需要引用v-has指令

<el-button @click='editClick' type="primary" v-has>编辑</el-button>

小结

关于权限如何选择哪种合适的方案，可以根据自己项目的方案项目，如考虑路由与菜单是否分离

权限需要前后端结合，前端尽可能的去控制，更多的需要后台判断

参考文献

  • https://whyta.cn/post/81d85b4011a8
  • https://segmentfault.com/a/1190000020887109
  • https://juejin.cn/post/6844903648057622536#heading-6

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/233416.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

poc_order_cnt_type

poc_order_cnt_type

为什么有poc_order_cnt_type？poc_order_cnt_type是为了推断出POC，POC表示了播放的顺序，frame_num在传递参考帧后加1，这里涉及到一个播放顺序和解码顺序的问题。 poc_order_cnt_type分为三种，取值为0~2，先从最简单的poc_order_cnt_type为2说起。 poc_order_cnt_type为2 …
阅读更多...
004:Direct 2D离屏渲染（Qt中实现）

004:Direct 2D离屏渲染（Qt中实现）

简介&#xff1a; 用QT开发图像显示的小程序&#xff0c;需要一些标注工具&#xff0c;由于用的是opengl渲染&#xff0c;所以就在内存中进行绘制&#xff0c;然后纹理贴图贴出去&#xff0c;发现Qt绘制的效果太差&#xff0c;且速度一般&#xff0c;于是就想着用direct2d来绘制…
阅读更多...
WEB渗透—反序列化（九）

WEB渗透—反序列化（九）

Web渗透—反序列化 课程学习分享&#xff08;课程非本人制作&#xff0c;仅提供学习分享&#xff09; 靶场下载地址&#xff1a;GitHub - mcc0624/php_ser_Class: php反序列化靶场课程&#xff0c;基于课程制作的靶场 课程地址&#xff1a;PHP反序列化漏洞学习_哔哩哔_…
阅读更多...
windows环境下载安装Nginx并配置防火墙

windows环境下载安装Nginx并配置防火墙

1、下载Nginx Nginx官网 下载稳定版 2、下载之后&#xff0c;解压 3、启动Nginx&#xff0c;命令&#xff1a;start nginx 最小化该窗口 主要&#xff0c;不要关闭&#xff0c;如果关闭&#xff0c;表示nginx服务关闭了 4、测试是否启动成功 在浏览器中输入http://localhos…
阅读更多...
PHP在线日语学习平台

PHP在线日语学习平台

有需要请加文章底部Q哦 可远程调试 PHP在线日语学习平台 一 介绍 此日语学习平台基于原生PHP开发&#xff0c;数据库mysql。系统角色分为用户和管理员。(附带参考设计文档) 技术栈&#xff1a;phpmysqlphpstudyvscode 二 功能 学生 1 注册/登录/注销 2 个人中心 3 查看课程…
阅读更多...
RT1020 —— BootLoader 中烧写 APP 到指定位置的方法

RT1020 —— BootLoader 中烧写 APP 到指定位置的方法

把数组数据放到指定的 Flash 自定义 section 中&#xff1a; 数组定义与声明&#xff1a; #define LOCATION_EXTFLASH_ATTRIBUTE __attribute__ ((section ("Myapp"))) __attribute__ ((aligned(4)))const unsigned char _aclwip_ping_bm[0x12880] LOCATION_EXTFLAS…
阅读更多...
MySQL InnoDB Cluster

MySQL InnoDB Cluster

MySQL InnoDB Cluster 一、InnoDB Cluster 基本概述 MySQL InnoDB Cluster 为 MySQL 提供了一个完整的高可用解决方案。通过使用 MySQL Shell 提供的 AdminAPI，你可以轻松地配置和管理一组至少由3个MySQL服务器实例组成的 InnoDB 集群。 InnoDB 集群中的每个 MySQL 服务器实例…
阅读更多...
河道水质在线监测系统：守护河流的生命力

河道水质在线监测系统：守护河流的生命力

随着工业和城市化的快速发展&#xff0c;水资源的污染问题日益严重。为了保障人民生活用水安全和生态环境的可持续发展&#xff0c;河道水质在线监测系统为守护河流的生命力提供了强有力的科技支持。 一、河道水质在线监测系统概述 河道水质在线监测系统是一种利用先进传感器、…
阅读更多...
KaiwuDB 亮相中国国际供应链促进博览会

KaiwuDB 亮相中国国际供应链促进博览会

11月28日&#xff0c;全球首个以供应链为主题的国家级展会——2023 中国国际供应链促进博览会&#xff08;简称“链博会”&#xff09;在北京盛大召开。KaiwuDB 受邀亮相大会&#xff0c;向与会者展示现代数据库技术在数字科技链条中的根基作用&#xff0c;其中分布式多模数据库…
阅读更多...
【JS Promise, Promise.all 与 async/await用法详解】

【JS Promise, Promise.all 与 async/await用法详解】

目录 PromisePromise基本使用Promise可进行连续回调Promise回调可接受入参1.工作原理 async/await总结参考文档&#xff1a; 异步 let a 0setTimeout(() > {a 1}, 1000)console.log(a) // 0此时这个延迟就成为异步执行的了&#xff0c;a值还没有变1就被使用输出&#xff0…
阅读更多...
Halcon 协同机械手进行自动标定

Halcon 协同机械手进行自动标定

流程 使用相机捕捉初始标定点位&#xff0c;记录世界坐标 在机器人示教器上基于基准点位进行其余8个点位设置&#xff0c;每次x轴偏移4 或 Y轴偏移4 对每个点位进行图像获取 编写Halcon脚本&#xff0c;获取9幅图像中点位中心的像素坐标&#xff0c;以及对应算出的…
阅读更多...
还在愁没项目？来瞧瞧这些另类赚钱方式

还在愁没项目？来瞧瞧这些另类赚钱方式

客套话不多说&#xff0c;直接上案例&#xff0c;这些都是正儿八经的真实案例&#xff0c;相信大家通过这些人的案例自然能摸索整理出一套属于自己的项目&#xff01;摸索不出&#xff0c;也多多少少能受一些灵感上的启发。 小A是长期混B站的&#xff0c;大家称他为“B站搬运工…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023