位置: IT常识 - 正文

【面试题】面试官: Vue如何实现权限管理?(面试题集锦)

编辑:rootadmin
【面试题】面试官: Vue如何实现权限管理?

一、权限管理

推荐整理分享【面试题】面试官: Vue如何实现权限管理?(面试题集锦),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:必看的70道面试题回答,50道面试题,面试题集锦,面试题及最佳答案,面试经典试题,面试题集锦,面试经典试题,面试题及参考答案,内容如对您有帮助,希望把文章链接给更多的朋友!

权限管理就是让不同的用户只能访问自己权限内的资源,有以下几种

路由权限,用户登录后只能看到自己权限内的导航菜单,且只能访问自己权限内的路由地址视图权限,用户只能看到自己权限内的内容和按钮请求权限,越权请求将其拦截二、控制权限接口权限按钮权限菜单权限路由权限接口权限

用户登录成功后可以得到一个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 === 203) { // 登录过期 router.push('/login') }})路由权限控制

方法一

在路由初始化的时候挂载全部路由,在路由上标记相应的权限信息,当路由跳转的时候做校验

const router = [ { path: 'home', component: () => import('@/views/home'), name: 'homePage', meta: { title: '主页', roles: ['admin','editor'] }}]

缺点:

会加载所有的路由,当路由很多的时候,对性能会有影响;每次路由跳转都要做权限判断;菜单信息写在前端,需要修改标题的时候,需要重新编译;菜单跟路由耦合在一起,路由不一定作为菜单显示,还要多加字段进行标识

方法二

初始化的时候先挂载不需要权限控制的路由,例如登录页。如果用户通过URL访问,则会跳转到404页面

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

function hasPermission(roles, permissionRoles) { if (roles.indexOf('admin') >= 0) return true if (!permissionRoles) return true return roles.some(role => permissionRoles.indexOf(role) >= 0)}const whiteList = ['/login', '/getMenuLis']router.beforeEach((to, from, next) => { if (getToken()) { if (to.path === '/login') { next({ path: '/' }) } else { if (store.getters.roles.length === 0) { store.dispatch('GetUserInfo').then(res => { const roles = res.data.roles store.dispatch('GetRoutes', { roles }).then(() => { router.addRoutes(store.getters.addRouters) next({ ...to, replace: true }) }) }).catch((err) => { store.dispatch('logOut').then(() => { Message.error(err) next({ path: '/' }) }) }) } else { if (hasPermission(store.getters.roles, to.meta.roles)) { next() } else { next({ path: '/401', replace: true, query: { noGoBack: true }}) } } } } else { if (whiteList.indexOf(to.path) !== -1) { next() } else { next('/login') } }})

缺点:

全局路由守卫里,每次路由跳转都要做判断菜单信息在前端,要修改个标题,需要重新编译菜单跟路由耦合在一起,路由不一定作为菜单显示,还要多加字段进行标识菜单权限

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

方法一

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

前端定义路由信息{ name: "login", path: "/login", component: () => import("@/pages/Login.vue")}【面试题】面试官: Vue如何实现权限管理?(面试题集锦)

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 { 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.btnUse,然后再做判断,比较繁琐

方法二

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

首先配置路由{ path: 'venueSetting', component: _import('venue/venueSetting'), name: '场馆设置', meta: { btnUse: ['admin', 'editor'] }},{ path: 'fieldSetting', component: _import('venue/fieldSetting'), name: '场地设置', meta: { btnUse: ['admin'] }}自定义权限鉴定指令const has = Vue.directive('has', { bind: function (el, binding, vnode) { let btnPermissionsArr = []; if(binding.value){ btnPermissionsArr = Array.of(binding.value); }else{ btnPermissionsArr = vnode.context.$route.meta.btnPermissions; } if (!Vue.prototype.$_has(btnPermissionsArr)) { el.parentNode.removeChild(el); } }});// 权限检查方法Vue.prototype.$_has = function (value) { let isExist = false; // 获取用户按钮权限 let btnUseStr = sessionStorage.getItem("btnUse"); if (btnUseStr == undefined || btnUseStr == null) { return false; } if (value.indexOf(btnUseStr) > -1) { isExist = true; } return isExist;};export {has}

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

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

根据具体的项目的方案,选择合适的方案,权限判断需要前后端一起判断。

给大家推荐一个实用面试题库1、前端面试题库 (面试必备)            推荐:★★★★★

地址:前端面试题库

本文链接地址:https://www.jiuchutong.com/zhishi/300084.html 转载请保留说明!

上一篇:20分钟上手ES6,不会ES6好意思说自己会JS ?(es6体验)

下一篇:【Web UI自动化测试】Web UI自动化测试之框架篇(全网最全)(web自动化测试平台)

  • du会员自动续费怎么取消(怎么取消百度du会员自动续费)

    du会员自动续费怎么取消(怎么取消百度du会员自动续费)

  • word文档表格尺寸怎么设置(word表格尺寸怎么调)

    word文档表格尺寸怎么设置(word表格尺寸怎么调)

  • 天猫精灵cc7屏幕多大(天猫精灵cc7屏幕只显示时间设置)

    天猫精灵cc7屏幕多大(天猫精灵cc7屏幕只显示时间设置)

  • 苹果7怎么设置门禁卡(苹果7怎么设置悬浮球的功能)

    苹果7怎么设置门禁卡(苹果7怎么设置悬浮球的功能)

  • 酷我音乐怎样截取歌曲的一部分(如何截取酷我音乐里的一段音乐)

    酷我音乐怎样截取歌曲的一部分(如何截取酷我音乐里的一段音乐)

  • qq头像的尺寸是多大(2020qq头像尺寸)

    qq头像的尺寸是多大(2020qq头像尺寸)

  • 300dpi是多少ppi(300dpi是多少像素尺寸)

    300dpi是多少ppi(300dpi是多少像素尺寸)

  • 微处理器的主要功能(微处理器的主要性能指标是指其体积的大小)

    微处理器的主要功能(微处理器的主要性能指标是指其体积的大小)

  • Excel输入数字变成E怎么办?(excel输入数字变成乱码)

    Excel输入数字变成E怎么办?(excel输入数字变成乱码)

  • iphone自带测分贝在哪(iphone 测量分贝)

    iphone自带测分贝在哪(iphone 测量分贝)

  • 全民k歌录屏为什么没有声音(全民k歌录屏为什么没有声音vivo)

    全民k歌录屏为什么没有声音(全民k歌录屏为什么没有声音vivo)

  • 显卡显存大小有什么用(显卡显存大小有什么好处)

    显卡显存大小有什么用(显卡显存大小有什么好处)

  • 网络经常掉线又自动连上(网络经常掉线又自动恢复)

    网络经常掉线又自动连上(网络经常掉线又自动恢复)

  • 滴滴出行啥时候出来的(滴滴出行啥时候上线)

    滴滴出行啥时候出来的(滴滴出行啥时候上线)

  • 冯诺依曼计算机的基本思想(冯诺依曼计算机体系结构)

    冯诺依曼计算机的基本思想(冯诺依曼计算机体系结构)

  • 手机卡能上网不能打电话和接电话(手机卡能上网不能发短信)

    手机卡能上网不能打电话和接电话(手机卡能上网不能发短信)

  • vivo的云服务怎么撤销(vivo的云服务怎么关闭)

    vivo的云服务怎么撤销(vivo的云服务怎么关闭)

  • 拼多多闪电退货怎么拒绝(拼多多闪电退货怎么关闭)

    拼多多闪电退货怎么拒绝(拼多多闪电退货怎么关闭)

  • vue拍视频怎么加文字(vue如何在视频中加图片)

    vue拍视频怎么加文字(vue如何在视频中加图片)

  • 手机怎么改变图片大小kb(手机怎么改变图片分辨率)

    手机怎么改变图片大小kb(手机怎么改变图片分辨率)

  • 小米Max2屏幕是LCD还是OLED(小米max2屏幕参数)

    小米Max2屏幕是LCD还是OLED(小米max2屏幕参数)

  • 红米k20pro升降摄像头寿命(红米k20pro升降摄像头卡住了)

    红米k20pro升降摄像头寿命(红米k20pro升降摄像头卡住了)

  • 淘宝积分怎么用(淘宝积分怎么用的)

    淘宝积分怎么用(淘宝积分怎么用的)

  • vivo怎么设置隐藏按键(vivo怎么设置隐藏界面)

    vivo怎么设置隐藏按键(vivo怎么设置隐藏界面)

  • vivos1电池容量(vivos1电池容量多大)

    vivos1电池容量(vivos1电池容量多大)

  • RedHat Linux 5安装手册(redhat5.6安装)

    RedHat Linux 5安装手册(redhat5.6安装)

  • uniapp实现下拉刷新及上拉(分页)加载更多(app,H5,小程序均可使用)(uniapp下拉菜单)

    uniapp实现下拉刷新及上拉(分页)加载更多(app,H5,小程序均可使用)(uniapp下拉菜单)

  • 土地增值税扣除20%的适用情况
  • 结构性存款现金流量表如何分类
  • 民办非企业工会经费
  • 个人住房交不交个税
  • 印花税技术服务合同按什么交
  • 增值税都有哪些科目
  • 二手房屋增值税税率
  • 土地出让金评估费怎么算
  • 挂失申请怎么写
  • 小规模纳税人财务报表是按季还是按月申报
  • 验资报告费用计入什么科目
  • 已经计提的增值税怎么退
  • 注册资本越大越有实力
  • 设定提存计划怎么填
  • 外方获得的利润怎么算
  • 建筑服务工程款会计分录
  • 行政单位缴纳罚款如何记账
  • 17税率改16税率的时间
  • microsoft阻止应用启动
  • 主营业务收入多栏式怎么填
  • 上年度的发票还能红冲吗
  • 企业所得税调增调减怎么理解
  • 其他债权投资有哪些明细科目
  • 结转材料采购成本的会计分录是什么
  • 销售部发生广告宣传费计入财务费用
  • 贷款损失会计处理
  • 销售折扣的会计分录处理
  • 仓储服务和不动产租赁
  • 出租固定资产取得的收入属于收入要素吗
  • php根据经纬度计算距离
  • 微信小程序的视频怎么下载
  • 不发工资可以交五险一金吗
  • 只有进项税没有销项税如何报税
  • 税务网如何填三方协议
  • 售后租回怎么理解
  • 基本户转到法人账户会计分录
  • php前台模板
  • 免税不能抵扣
  • 个人所得税进什么科目
  • 公积金由个人全部交,单位违法吗法吗
  • 进项税转出金额怎么算
  • 长期股权投资的初始投资成本
  • 研发费用不能加计扣除的有哪些项目
  • 当天开具的发票当天不能勾选认证吗?
  • 委托加工物资核算
  • 复利现值和复利终值互为逆运算对吗
  • 考核员工的罚款计入什么
  • 自产产品用于职工食堂,确认收入吗
  • 应交税费应交印花税贷方余额
  • 非流动资产处置利得计入什么科目
  • 餐饮业怎样做账
  • 企业的固定资产由于技术进步等原因
  • 会计账簿按用途分类分为什么
  • 启用账簿时应在账簿上签名或盖章的是
  • sql2000 sql2008
  • ubuntu禁用服务命令
  • ubuntu 启动gui
  • linux如何调出鼠标
  • windows10预览版怎么样
  • 基于嵌入式linux的课程设计
  • 删除同步中心图标
  • Win10预览版拆弹
  • linux计划任务每天执行一次
  • 动态规划之矩阵连乘
  • color 对于当前会话,更改命令提示窗口的前景和背景色
  • JavaScript中的NaN代表什么
  • 使用的英文
  • shell脚本的fi
  • unity 3d脚本编程
  • jquery有哪些
  • 安卓 html
  • android开发框架mvp
  • 河南网上税务申报步骤
  • 税务局属于什么行业类别
  • 四川十大纳税企业
  • 租房完税证明需要多长时间内的
  • 上海浦东税务局电话 工作时间
  • 企业注销认缴与实缴是否还有风险
  • 中国税务标识标准字体
  • 金税盘里的发票清单怎么导出
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设