位置: IT常识 - 正文

后台管理系统权限管理详解

编辑:rootadmin
后台管理系统权限管理详解 权限管理

推荐整理分享后台管理系统权限管理详解,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

简述权限管理:

你可以在后台通过一个 tree 控件或者其它展现形式给每一个页面动态配置权限,之后将这份路由表存储到后端。当用户登录后得到roles,前端根据roles去向后端请求可访问的路由表,从而动态生成可访问页面,之后就是 router.addRoutes 动态挂载到router 上,你会发现原理是相同的,万变不离其宗。和后台开发时人员商量,能不能在登录之后,把相关权限接口数据返回给我,然后进行菜单的动态展示

前端权限的意义 1降低非法操作的可能性 2.尽可能的排除不必要的请求,减少服务器压力 3.提高用户体验

前端权限控制思路

菜单的控制(管理系统的侧边栏)

在登陆请求中,会得到权限数据。当然,这个需要后台返回的数据的支持,前段根据权限数据,展示对应的菜单,点击菜单,才能查看相关的界面

界面的控制

如果用户没有登录,手动在地址栏敲入管理界面的地址,则需要跳转到登录界面

如果用户已经登录,可是手动敲入非权限内的地址,则需要跳转404界面

按钮的控制

在某个菜单的界面中,还得根据权限数据,展示出可进行操作的按钮,比如删除,修改,增加

请求和响应的控制

如果用户通过非常规操作,比如通过浏览器调试工具将某些禁用的按钮变成启腆状态,此时发的请求,也应该被前端所拦截

后台管理系统的权限管理

菜单控制

我现在登录就让后台把路由信息发给我,但是我要用到菜单 页面,这时候我就要使用vuex来共享路由信息;在state中写一个空数组rightList[]接收login页面提交过来的权限数据。映射到菜单页面

当我登陆过后刷新页面时菜单栏消失,为什么?怎么解决

因为当我登陆过后重新加载时,我的vuex也被刷新,但是vuex的初始值我放的是一个空数组,而且此时我们也没有进行那个登陆操作了。所以就导致我的rightList从有数据变成了没数据⇒我渲染的菜单栏消失。

state:{rightList:JSON.parse(sessionStorage.getItem('rightList')||'[]')},mutations:{setRightList(state,data){state.rightList = datasessionStorage.setItem('rightList',JSON.stringify(data))}}

当我点击退出之后,我需要清空sessionStorage和vuex中的数据 在点击登出的这个事件中除了写跳转到登录页面还要写清除操作

logout(){//删除sessionStorage数据sessionStorage.clear()this.$router.push('/login')//删除vuex中的数据,让当前的界面刷新(先跳转再刷新)window.location.reload()}

界面控制

后台管理系统权限管理详解

正常的逻辑是通过登录界面,登录成功之后跳转到管理平台界面,但是如果用户直接敲入管理平台的地址,也是可以跳过登录的步骤.所以应该在某个时机判断用户是否登录

如何判断用户是否登陆

在登录时把后台接口中返回的路由数据中的token存起来,有token就是登录,没就是没登录sessionStorage.setItem('token',res.data.token)

什么时机判断

使用路由导航守卫

router.beforeEach((to,from,next)=>{if(to.path==='/login'){next()}else{const token = sessionStorage.getItem('token')if(!token){next('/login')}else{next()}}})

还有一个问题,当我登陆之后,我在地址栏中敲下一个不属于我的权限界面,我依旧可以进入(例如我是一个普通用户,我不能访问角色管理界面,但是我在地址栏中敲下角色管理的界面地址,我依旧能访问)这如何阻止?

可以依旧在路由导航中继续判断,但是路由导航守卫固然可以在每次路由地址发生变化的时候,从vuex中取出rightList判断用户将要访问的界面,这个用户到底有没有权限.不过从另外一个角度来说,这个用户不具备权限的路由,是否也应该压根就不存在呢?

import store from '@/store' const userRoles= {path:'/users',component:Users} const rolesRoles= {path:'/roles',component:Roles} const goodsRoles= {path:'/goods',component:Goods}const cateRoles= {path:'/categories',component:Categories}、const ruleMapping= {'users':userRoles,'roles':rolesRoles,'goods':goodsRoles,'categories':cateRoles}{path:'/home',component:Home,redirect:'welcome',children:[{path:'/welcome',component:Welcome} //{path:'/users',component:Users} //{path:'/roles',component:Roles} //{path:'/goods',component:Goods}//{path:'/categories',component:Categories}]}export function initDynamicRoutes(){//根据二级权限,对路由规则进行动态的添加const currentRoutes = router.options.routes//遍历二级权限 通过vuex中的store拿到我们的rightList数据const rightList = store.state.rightListrightList.forEach(item=>{item.children.forEach(item=>{//item二级权限,动态添加到childrenconst temp = ruleMapping[item.path]temp.meta = item.rightscurrentRoutes[2].children.push(temp)})})router.addRoutes(currentRoutes)}export default router

登录成功之后动态添加

根据用户所具备的权限,去动态的添加路由规则(还是那个登陆里后台返回的数据)import{initDynamicRoutes }from '@/router.js'initDynamicRoutes()//在这个页面刷新界面之后,//router.js这个页面当然也会重新加载,//此时所有路由初始化,动态路由不复存在,//重新登录成功之后才能使动态路由重新操作//刷新之后我也要动态添加路由规则这个步骤放到app.vue中

在这个页面我刷新界面之后,router.js这个页面当然也会重新加载,此时所有路由初始化,动态路由不复存在,页面空白。重新登录成功之后才能使动态路由重新操作,刷新之后我也要动态添加路由规则

我刷新之后我也要动态添加路由规则,我将这个放到app.vue中的created()生命周期,这样刷新依旧保存了路由规则

App.vueimport{initDynamicRoutes }from '@/router.js'created(){initDynamicRoutes ()}

所以initDynamicRoutes 有两个时机被调用,第一个时机是在登录成功之后被调用,登陆成功之后我在界面上刷新的话,这时候走的时候根组件当中的created的动态添加

按钮控制

虽然用户可以看到某些界面了,但是这个界面的一些按钮,该用户可能是没有权限的.因此,我们需要对组件中的一些按钮进行控制.用户不具备权限的按钮就隐藏或者禁用,而在这块中,可以把该逻辑放到自定义指令中

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cmjVqZSO-1662525080962)()]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-63kHPIKH-1662525080963)()]

在按钮之上添加一个自指令

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YPMQknaP-1662525080963)()]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ErgwxoV7-1662525080964)()]

<el-button type="primary"@click="addDialogVisible=true" v-permission="{action:'add',effect:'disabled'}">添加</el-button>实现自定义指令=>在utils中写一个permission.js文件实现自定义指令的一个注册import Vue from 'vue'import router from '@/router.js'Vue.directive('permission',{inserted(el,binding){const action = binding.value.action//添加const effect = binding.value.effect//禁用判断当前的路由所对应的组件中,如何判断用户是否具备action的权限呢权限的数据在rightList中;**可以做一件事情=>相关权限获取的判断**clg(router.currentRoute.meta)//看当前组件的路由规则是什么这时候使用meta来增加这个组件这个用户所具备的权限数据,那么对于permission而言就方便很多很多,就可以解决了if(router.currentRoute.meta.indexOf(action)===-1){if(effect==='disabled'){//禁用el.disabled=trueel.classList.add('is-disabled')//ui组件需要用的样式}el.parentNode.removeChild(el) //删除元素button}}})该文件在main.js中进行一个注册:import './utils/permission.js'

请求和响应的控制

请求控制

除登录之外的每一次请求都需要token,这样服务器才能鉴别你的身份。所以在请求拦截器中写

axios.interceptors.request.use(function(req){const currentUrl = req.urlif(currentUrl!=='login'){req.headers.Authorization = sessionStorage.getItem('token')}return req})

如果发出了非权限内的请求,应该直接在前端访问内被阻止,虽然这个请求发到服务器也会被拒绝

import axios from 'axios'import Vue from 'vue'import router from '@router.js'axios.interceptors.request.use(function(req){const currentUrl = req.urlif(currentUrl !=='login'){req.headers.Authorization = sessionStorage.getItem('token')const action = actionMapping[req.method]const currentRight = router.currentRoute.metaif(currentRight&&currentRight.indexOf(action)===-1){//没有权限alert('没有权限')return Promise.reject(new Error('没有权限'))👇🏿}//判断非权限范围内的请求//router.currentRoute.meta//判断当前请求的行为//restful风格请求 👇🏿//get请求 view//post请求 add//put请求 edit//delete请求 delete//[add view edit delete]=>meta中这几种情况 通过请求方式来判断这个请求到底是做什么样的事情,再看一下这个事情在当前路由规则的权限列表内存不存在,不存在就直接阻止掉需要映射关系=>请求方式和操作行为的映射关系const actionMapping = {'get':'view','post':'add','put':'edit','delete':'delete'}}return req})

响应控制

得到了服务器返回的状态码401,代表token超时或者被篡改了,此时应该强制跳转到登录界面

axios.interceptors.response.use((res)=>{if(res.data.meta.status===401){router.push('/login')sessionStorage.clear()window.location.reload()}return res})
本文链接地址:https://www.jiuchutong.com/zhishi/287342.html 转载请保留说明!

上一篇:优酷路由宝不拆机回刷 实现金币倍增的详细教程(优酷路由宝还有用吗)

下一篇:深度学习——VGG16模型详解

  • 网页制作完成后,在最终上线之前,可以在本地进行测试。上线后会根据反馈数据进行优化

    网页制作完成后,在最终上线之前,可以在本地进行测试。上线后会根据反馈数据进行优化

  • 网站优化在百度搜索算法不断调整怎样不受影响?(网站优化在百度哪里找)

    网站优化在百度搜索算法不断调整怎样不受影响?(网站优化在百度哪里找)

  • 微博营销:论明星与微博的那些事儿(微博营销的经典案例)

    微博营销:论明星与微博的那些事儿(微博营销的经典案例)

  • 华为p50是直屏还是曲屏(华为p50是直屏还是曲屏好)

    华为p50是直屏还是曲屏(华为p50是直屏还是曲屏好)

  • 如何关闭华为智慧语音服务(如何关闭华为智慧服务)

    如何关闭华为智慧语音服务(如何关闭华为智慧服务)

  • 什么功能不是操作系统所具有的(不属于操作功能的是)

    什么功能不是操作系统所具有的(不属于操作功能的是)

  • 防水等级ip68能游泳吗(防水等级ip68能洗澡吗)

    防水等级ip68能游泳吗(防水等级ip68能洗澡吗)

  • 配对后蓝牙耳机没有声音为什么(配对后蓝牙耳机怎么配对)

    配对后蓝牙耳机没有声音为什么(配对后蓝牙耳机怎么配对)

  • 华为p30微信深色模式如何设置(华为p30微信深色模式在哪)

    华为p30微信深色模式如何设置(华为p30微信深色模式在哪)

  • 兼容性检查器怎么回事(兼容性检查器怎么解决word)

    兼容性检查器怎么回事(兼容性检查器怎么解决word)

  • 腾讯会议可以开摄像头吗(腾讯会议可以开小窗口吗)

    腾讯会议可以开摄像头吗(腾讯会议可以开小窗口吗)

  • 为什么微信视频动态删不掉(为什么微信视频总是黑屏)

    为什么微信视频动态删不掉(为什么微信视频总是黑屏)

  • 目前硬盘的转速主要有

    目前硬盘的转速主要有

  • 兼容模式有什么好处(兼容模式有什么好处和坏处)

    兼容模式有什么好处(兼容模式有什么好处和坏处)

  • 电子体温计显示lo是什么意思(电子体温计显示err)

    电子体温计显示lo是什么意思(电子体温计显示err)

  • 苹果11为什么会自动关机(苹果11为什么会突然失灵)

    苹果11为什么会自动关机(苹果11为什么会突然失灵)

  • 剪映片尾音乐怎么剪(剪映片尾怎么加音乐)

    剪映片尾音乐怎么剪(剪映片尾怎么加音乐)

  • 追剧大全为啥打不开(追剧大全能投屏吗)

    追剧大全为啥打不开(追剧大全能投屏吗)

  • 苹果8a1907是国行吗(iphone8a1907是什么版)

    苹果8a1907是国行吗(iphone8a1907是什么版)

  • nova5和nova4区别(华为nova5和华为nova4哪个好)

    nova5和nova4区别(华为nova5和华为nova4哪个好)

  • 西孟加拉邦的双角犀鸟,印度 (© Debapratim Saha/Minden Pictures)(什么是西孟加拉邦首府)

    西孟加拉邦的双角犀鸟,印度 (© Debapratim Saha/Minden Pictures)(什么是西孟加拉邦首府)

  • python如何删除字符串的特殊字符(python如何删除字典中的键值对)

    python如何删除字符串的特殊字符(python如何删除字典中的键值对)

  • python中XML删除元素(python numpy 删除元素)

    python中XML删除元素(python numpy 删除元素)

  • 新公司三个月没有录入职员
  • 转账支票的密码盘
  • 飞机票火车票汽车票抵扣进项税
  • 房地产开发企业会计科目
  • 支票去银行怎么进账
  • 银行汇票多余金额会计分录
  • 税收筹划的具体方法有哪些
  • 产权转移数据印花税按次申报?
  • 哪些是非累计带薪缺勤?
  • 事业单位存货盘盈
  • 银行存款日记账最后一行怎么填
  • 一般纳税人申请流程
  • 药店税票税点
  • etc发票一直不出来
  • 辅导期纳税人预缴增值税
  • 房地产土地增值税计税依据
  • 做内账收入含税吗
  • 领用原材料用于职工福利的税费怎么算
  • 教你从脸上看出风水
  • 生产企业销售给其他单位的生产工具
  • 广告制作包括印花吗
  • win10更新21h1后很卡
  • php运用于哪些领域
  • 计划成本法购入材料
  • ubuntu设置nginx开机启动
  • 付工程改造余款分录
  • zendstudio怎么创建php项目
  • 跨行政区域是跨省吗
  • 累计税费怎么计算
  • 出差住宿费会计分录怎么做
  • 视觉机械臂操作视频
  • 人类记忆存储在哪
  • 命令行改gpt
  • php单例模式
  • msg文件怎么创建
  • 会计要离职了要注意几点
  • 个人独资企业只有收入没有成本和费用
  • 财务状况简单说明
  • 印花税报少了交税了怎么办
  • 作废的发票会统计到税额里吗
  • mysql 随机抽样
  • 有销项没有进项怎么做分录
  • 生产设备改扩建会计分录
  • 净资产增加数怎么计算
  • 发放股票股利如何影响计算基本每股收益
  • 收客户利息怎么处理
  • 税前扣除项目主要包括
  • sql server怎么分离
  • windons10安装
  • mac怎样下载
  • freebsd使用wifi
  • 虚拟机vmware下载教程
  • rpm包安装的apache可以如何启动
  • solaris 11.4
  • asm是啥
  • ubuntu14打开终端
  • centos源码安装软件
  • 局域网 打印机 共享
  • win8怎么关闭管理员用户
  • Linux中怎么安装nano已经有安装包了
  • win8应用商店怎么卸载
  • 电脑微软拼音输入法
  • linux三种用户权限
  • win8如何进行系统还原
  • cocos2dx环境搭建
  • Unity3D ugui事件监听机制
  • opengl入门视频教程
  • 置顶聊天折叠怎么开启
  • python3的urllib
  • PHP+jquery+ajax实现分页
  • shell中for循环如何用sed
  • unity给物体添加重力
  • python dict.get()和dict['key']的区别详解
  • 河南省发票查询真伪
  • 企业所得税国家和地方分配比例
  • 建筑业按多少税收
  • 村副主任有什么要求
  • 美国纽约购物
  • 刚注册了一家深圳公司
  • 注册会计师人员名单
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设