权限控制权限控制权限控制权限控制权限控制

🕗 发布于 2024-07-04 19:03 状态模式 vue.js 前端

1.权限的分类

视频学习：https://www.bilibili.com/video/BV15Q4y1K79c/?spm_id_from=333.337.search-card.all.click&vd_source=386b4f5aae076490e1ad9b863a467f37

1.1 后端权限

1. 后端如何知道该请求是哪个用户发过来的

可以根据 cookie、session、token，一般是根据token获取的

2. 后端的权限设计`RBAC`

权限一般是分配给角色，角色下有很多用户，这样用户就有对应的权限。
一个用户可以有多个角色，一个角色下有很多用户

1.2 前端权限

1.必要性

前端权限的控制本质上来说，就是控制端的视图层的展示和前端所发送的请求。但是只有前端权限控制没有后端权限控制是万万不可的。前端权限控制只可以说是达到锦上添花的效果。

2.好处

为什么越来越多的项目也进行了前端权限的控制，主要有这几方面的好处:

降低非法操作的可能性，无权限的按钮可能会带来有心者非法操作
尽可能排除不必要清求，减轻服务器压力
提高用户体验，避免在界面上给用户带来困扰，让用户专注于分内之事

2.前端权限控制思路

2.1 菜单的控制

根据后端返回的数据．前端展示对应的菜单．点击菜单，才能查看相关的界面

2.2 界面的控制

如果用户没有登录，手动在地址栏敲入管理界面的地址，则需要跳转到登录界面
如果用户已经登录，如果手动敲入非权限内的地址，则需要跳转404 界面

2.3 按钮的控制

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

2.4 请求和响应的控制

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

3.实现步骤

3.1 权限菜单栏控制

3.1.1 登录按钮

点击登录按钮，获取token和侧边栏数据，将侧边栏数据存入vuex中
在home组件中获取侧边栏数据，渲染到侧边栏

出现的问题：刷新浏览器，vuex的数据会被清空
解决：与sessionStorage结合使用

store文件下的index.js：

import Vue from 'vue
import Vuex from 'vuex
Vue .use(Vuex)

export default new Vuex.store({
state:{
rightlist:JsoN.parse(sessionstorage.getItem('rightList')||'[]')
},
mutations:{
setRightList(state, data){
state.rightList = data
sessionStorage.setItem('rightList',JSON.stringify(data))
},
...

login.vue的代码：

login(){
this.$refs.loginFormRef.validate(async valid =>{
...
this.$store.commit('setRightList', res.rights)
this.$message.success('登录成功')
this.$router .push('/home')
})
}

home.vue的代码：

import{mapstate }from 'vuex'
computed:{
...mapstate(['rightList'])
}
created(){
this.activePath =window.sessionstorage.getItem('activePath')
this.menulist = this.rightList
}

3.1.2 登出按钮

期望：退出后，清空sessionStorage缓存和vuex的数据

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

3.2 界面的控制

3.2.1 登录成功之后才能跳转到管理平台界面。

但是如果用户直接敲入管理平台的地址,也是可以跳过登录的步骤,所以应该在某个时机判断用户是否登录
1）如何判断是否登录
缓存中是否有token

sessionStorage.setItem('token', res.data.token)

2）什么时候判断
路由导航守卫

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

3.2.2 具备菜单权限才能跳转到访问页面

虽然菜单项已经被控制住了,但是路由信息还是完整的存在于浏览器,正比如zhangsan这个用户并不具备角色这个菜单,但是他如果自己在地址栏中敲入/roles的地址,依然也可以访问角色界面
路由导航守卫固然可以在每次路由地址发生变化的时候,从vuex中取出rightlist判断用户将要访问的界面,这个用户到底有没有权限。不过从另外一个角度来说,这个用户不具备权限的路由,是否也应该压根就不存在呢?
router.js

import Vue from "vue
import Router from 'yue-router
import Login from '@/components/Login.vue'
import Home from'@/components/Home.vue'
import welcome from '@/components/welcome.vue'
import Users from'@/components/user/Users.vue'
import Roles from'@/components/role/Roles.vue'
import GoodsCate from '@/components/goods/GoodsCate.vue'
importGoodsList from '@/components/goods/GoodsList.vue'
import NotFound from '@/components/NotFound.vue'
import store from '@/store1mport'

Vue.use(Router)

const userRule={path:/users',component:Users }
const roleRule ={path:'/roles', component: Roles }
const goodsRule={path:'/goods', component: GoodsList }
const categoryRule ={ path:"/categories', component: Goodscate }

const ruleMapping ={
'users': userRule,
'roles': roleRule,
'goods': goodsRule，
'categories': categoryRule
}

const router = new Router({
routes:[
{
path:'/'，
redirect:'/home',
},
{
path:'/1ogin',
component: Login,
},
{
path:'/home',
component:Home,
redirect:"/welcome
children:[
{ path:'/welcome',component:welcome },
//{path:'/users',component:Users },
// { path: '/roles',component:Roles },
//{ path:'/goods',component:GoodsList },
//{path:"/categories',component: GoodsCate }
}
},
{
path:'*',
component: NotFound
}
]
}]

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

export function initDynamicRoutes(){
//根据二级权限，对路由规则进行动态的添加
const currentRoutes =router.options.routes
const rightList =store.state.rightList
rightList.forEach(item =>{
item.children.forEach(item =>{
//item 二级权限
const temp = ruleMapping[item.path]
//设置路由元信息
temp.meta = item.rights
//添加动态路由
currentRoutes[2].children.push(temp)
})
})
router .addRoutes(currentRoutes)
}

export default router

Login.vue

import {initDynamicRoutes } from '@/router.js'

login(){
this.Srefs.loginFormRef.validate(async valid =>{
if(!valid)return
const { data:res }= await this.$http.post('login', this.loginForm)
if(res.meta.status !== 200) return this.$message.error('登录失败!')
this.$store.commit('setRightList',res.rights)
this.$store.commit('setusername',res.data.username)
sessionStorage.setItem('token',res.data.token)
initDynamicRoutes()
this.$message.success('登录成功')
this.Srouter .push('/home')
})
}

问题：如果我们重新刷新的话动态路由就会消失，动态路由是在登录成功之后才会调用的，刷新的时候并没有调用，所以动态路由没有添加上
解决：可以在app.vue中的created中调用添加动态路由的方法

`App.vue`

```javascript
import { initDynamicRoutes }from '@/router.js'
export default {
name: 'app'
created(){
initDynamicRoutes()
}
}

3.3 按钮的控制

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

permission.js
自定义指令——显示还是隐藏按钮

import Vue from 'vue
import router from '@/router.js'
Vue.directive('permission', {
inserted: function(el, binding){
const action = binding.value.action
//获取当前路由的meta
const currentRight =router.currentRoute.meta
if(currentRight){
if(currentRight.indexof(action)==-1){
// 不具备权限
const type = binding.value.effect
//禁用按钮
if(type ==='disabled'){
el.disabled = true
el.classList.add('is-disabled')
else {
//不显示按钮
el.parentNode.removechild(el)
}
}
}

main.is
引入自定义指令

import'./utils/permission.js'

router.js
router中通过meta获取按钮权限

export function initDynamicRoutes(){
const currentRoutes =router.options.routes
const rightList =store.state.rightList
rightList.forEach(item =>{
item.children.forEach(item =>{
//下面是核心的两行，router中加入meta
const itemRule =ruleMapping[item.path]
itemRule.meta=item.rights
currentRoutes[2].children.push(itemRule)
})
})
router.addRoutes(currentRoutes)

使用指令

v-permission="{action:'add'}"
v-permission="{action:'delete', effect:'disabled'}"

3.4 请求和响应的控制

3.4.1 请求控制

除了登录请求都得要带上token,这样服务器才可以鉴别你的身份

axios.interceptors.request.use(function(reg){
const currentUrl =reg.ur1
if(currenturl !== 'login'){
req.headers.Authorization =sessionstorage.getItem('token')
}
return reg
})

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

import axios from'axios'
import Vue from 'vue'
import router from '../router'
//配置请求的跟路径，目前用mock模拟数据，所以暂时把这一项注释起来
// axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
const actionMapping={
get:'view',
post:'add',
put: 'edit',
delete:'delete'
}

axios.interceptors.request.use(function(req){
const currentUrl=req.url
if(currenturl !== 'login'){
req.headers.Authorization =sessionStorage.getItem('token')
// 当前模块中具备的杈限
// 查看 get请求
// 增加post请求
// 修改put请求
// 删除delete请求
const method =reg.method
// 根据请求，得到是哪种操作
const actión= actionMapping[method]
// 判断action是否存在当前路由的权限中
const rights =router.currentRoute.meta
if(rights && rights.indexof(action)==-1){
// 没有权限
alert("没有权限")
return Promise.reject(new Error('没有权限'))
}
}
return reg
})

axios.interceptors.response.use(function(res){
return res
})
Vue.prototype.$http =axios

3.4.2 响应控制

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

axios.interceptors.response.use(function(res){
if(res.data.meta.status === 401){
router.push('/login')
sessionstorage.clear()
window.location.reload()
}
return res
})

4. 小结

前端权限的实现之须要后端提供数据支持，否则无法实现。
返回的权限数据的结构，前后端需要沟通协商怎样的数据便用起来才最方便

4.1 菜单控制

权限的数据需要在多组件之间共享，因此采用vuex
防止刷新界面，权限数据丢失，所以需要存在sessionStorage，并目要保证两者的同步

4.2 界面控制

路由的导航守卫可以防止跳过登录界面
动态路由可以让不具备权限的界面的路由规则压根就不存在

4.3 按钮控制

路由规则中可以增加路由元数据meta
通过路由对象可以得到当前的路由规则以及存在此规则中的meta 数据
自定义指令可以很方便的实现按钮控制

4.4 请求和响应控制

请求拦截器和响应拦截器的使用
请求方式的约定restful

原文地址：https://blog.csdn.net/qq_39928481/article/details/140126640

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：多维度多场景文档门户，鸿翼ECM文档云打造文档管理新范式
下一篇：实时数仓Hologres OLAP场景核心能力介绍

PCL 三维重建 RBF移动立方体三维重建算法
RBF（径向基函数）Marching Cubes算法是一种基于RBF插值的方法，用于从点云数据中提取三维表面。这种算法结合了传统的Marching Cubes算法和径向基函数的优势，能够处理复杂的点云
阅读更多2024-11-19
Argo workflow 拉取git 并使用pvc共享文件
第一个任务（拉取 Git 仓库）：这个任务将使用 git 命令克隆指定的 Git 仓库。第二个任务（读取 Git 文件）：这个任务会读取第一个任务拉取的 Git 仓库中的文件。我们将使用 Argo W
阅读更多2024-11-19
java计算机毕业设计选题参考3000篇
【294】springboot+jpa+layui学生住宿管理系统mysql学生寝室分配系统含文档。基于微信小程序的社区车位租赁系统的设计与实现+springboot后台weixin200。【483】
阅读更多2024-11-19
《Python网络安全项目实战》项目6 编写密码工具程序_练习题(2)答案
《Python网络安全项目实战》项目6 编写密码工具程序_练习题(2)答案
阅读更多2024-11-19
三种方式js的引入
1.js的组成部分：BOM(browser object model)浏览器对象模型、DOM(document object model)文档对象模型、ECMAScript。2.js的引入方式:行内式
阅读更多2024-11-19
使用MQTTX连接新版ONENet
使用mqtt连接新版的onenet 教程包含产品创建设备创建，关键参数获取，token软件获取，token生成，mqttx软件的下载与使用数据流的上传等手把手操作帮助你上云
阅读更多2024-11-19
深度学习之其他常见的生成式模型
自回归模型通过对图像数据的概率分布pdataxpdatax进行显式建模，并利用极大似然估计优化模型。pdatax∏i1npxi∣x1x2xi−1pdataxi1∏npxi∣x1x2..
阅读更多2024-11-19
MySQL表的新增与查询
这里的值要和列的个数和类型相匹配使用'或者"来表示字符串。
阅读更多2024-11-19
Vue-组件三大组成&组件通信
style的默认样式是作用到哪里的？scoped的作用是什么？style中推不推荐加scoped？data写成函数的目的是什么？组件通信，就是指组件与组件之间的数据传递组件的数据是独立的，无法直接访问
阅读更多2024-11-19
Python爬虫学习路线精简大纲！！！
Python爬虫学习路线精简大纲！！！
阅读更多2024-11-19