程序员经验分享-hwhale

后台管理系统的权限控制与管理

2023-05-16

此文章根据视频教程进行整理前端面试官必问系列-后台系统的权限控制与管理，建议搭配视频教程一起食用效果更佳

https://www.bilibili.com/video/BV15Q4y1K79c/

在Web 系统中，权限很久以来一直都只是后端程序所控制的。 为什么呢？ 因为Web 系统的不质围绕的是数据， 而和数据库最紧密接触的是后端程序。所以在很长的一段时间内， 权限一直都只是后端程序要考虑的话题。 但是随看前后端分离架构的流行， 越来越多的项目也在前端进权限控制。

一、 权限相关概念


1.1 权限的分类

  • 后端权限

从根不上讲前端仅仅只是视图层的展示， 权限的核心是在于服务器中的数据变，所以后端才是权限的关键，后端权限可以控制某个用户是否能够查询数据， 是否能够修改数据等操作

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

cookie
session
token

  1. 后端的权限设计RBAC

用户
角色
权限
前端权限

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

1.2 前端权限的意义


如果仅从能够修改服务器中数据库中的数据层面上讲， 确实只在后端做控制就足够了， 那为什么越来越多的项目也进行了前端权限的控制， 主要有这几方面的好处

1、降低非法操作的可能性
不怕赃偷就怕贼惦记， 在页面中展示出一个就算点击了也最终会失败的按钮，势必会增加有心者非法操作的可能性
2、尽可能排除不必要清求， 减轻服务器压力
没必要的请求， 操作失败的清求， 不具备权限的清求， 应该压根就不需要发送， 请求少了， 自然也会减轻服务器的
压力
3、提高用户体验
根据用户具备的权限为该用户展现自己权限范围内的内容， 避免在界面上给用户带来困扰， 让用户专注于分内之事


二、 前端权限控制思路


2.1 菜单的控制


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

2.2 界面的控制


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

2.3 按钮的控制


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

2.4 请求和响应的控制


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

三、实现步骤


3.1 权限菜单栏控制


用户登录之后服务端返回一个数据，这个数据有菜单列表和token，我们把这个数据放入到vuex中，然后主页根据vuex中的数据进行菜单列表的渲染

问题： 刷新界面vuex数据消失，菜单栏消失

解决： 将数据存储在sessionStorage中，并让其和vuex中的数据保持同步

3.2 界面的控制
登录成功后，将token数据存储在sessionStorage中，判断是否登录

1. 路由导航守卫

 

问题： 这样用户在登录之后就可以访问其他界面了，但如果用户A登录之后他只能访问a页面，他不能访问b页面，但是这时候他还是可以通过地址栏输入进入到b页面

解决： 当然我们也可以设置路由导航守卫，但是如果有多个页面，设置会非常不方便，并且对于用户A来说，它是不用访问b页面的，这时候我们何不对A不显示b页面，这个时候我们就用到了动态路由

2. 动态路由


根据当前用户所拥有的的权限数据来动态添加所需要的路由

先定义好所有的路由规则

在这里插入图片描述 登录成功之后动态添加路由，注意这个initDynamicRoutes的方法需要暴露出去在登录页面调用

在这里插入图片描述
这样当用户A在地址栏输入自己不能访问的路由时，则不会跳转到该页面，跳转到404页面

 在这里插入图片描述

 


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

解决： 可以在app.vue中的created中调用添加动态路由的方法

在这里插入图片描述

 

3.3 按钮的控制


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

比如我们可以根据后端返回的数据right来判断用户有什么权限，如下图

在这里插入图片描述
添加自定义指令 控制按钮

在这里插入图片描述

 

3.4 请求和相应的控制


请求控制


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

这块使用的就是asiox的请求拦截器设置

在这里插入图片描述
如果发出了非权限内的请求， 应该直接在前端范围内阻止， 虽然这个请求发到服务器也会被拒绝

 

非权限内的请求：比如a用户是不能够操作该页面的按钮的，但是他通过f12调试把按钮改为可点击，如果我们不对这个请求进行处理，那么这个请求就会发送出去

在这里插入图片描述
响应控制

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

在这里插入图片描述

四、小结


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

4.1 菜单控制


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


4.2 界面控制


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


4.3 按钮控制


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


4.4 请求和响应控制


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

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

后台管理系统的权限控制与管理 的相关文章

  • Ubuntu18.04 NX下用ZED2 双目立体相机进行SLAM

    NX下的ZED2开发 安装流程问题开始了看效果安装ZED2 ROS工具 新故事篇章 zed2测距开始实现 安装流程 了解zed参数 因为网上的安装流程还是不太完整 xff0c 我补充一下 希望对其他人也有帮助 部分流程参考这位 xff1a

  • ubuntu16.04备份和迁移

    ubuntu16 04备份和迁移 背景实践1 备份整个系统2 重装Ubuntu16 043 恢复系统 题外话 xff1a 修改主机名参考文章 背景 此文用来快速记录备份和恢复的过程步骤 xff0c 具体命令意思不做过多介绍 因为不想新设备重

  • Ubuntu apt-get报错

    昨天晚上更新源 xff0c 居然报错了 zcidcs 64 ubuntu sudo apt get upgrade sudo password for zcidcs Reading package lists Done Building d

  • 2014阿里巴巴面试总结

    刚结束的一面 xff0c 可能昨天笔试题目做得还行 xff0c 今天中午电话我叫我1 30去面试 xff0c 时间紧急 xff0c 我吃完饭赶紧回宿舍小休息一会儿 xff0c 然后奔赴文三路的华星时代大厦 人太多了 xff0c 等到了2 2

  • 基类指针，子类指针，虚函数，override与final

    一 xff1a 基类指针与子类指针 span class token macro property span class token directive keyword include span span class token strin

  • web开发中实现页面记忆的几种方式

    一 前言 在前段时间公司有个需求是对前一个页面的操作进行记忆 xff0c 例如分页的样式 xff0c 选中的条件等 之前是用的session去存储记忆数据 xff0c 老大让我调研一下目前比较合理的方式然后分析一下 xff0c 这里以本篇博

  • 基于VINS与FastPlanner的无人机自主飞行Gazebo仿真

    项目来源及展示 xff1a https www bilibili com video BV1WK4y1V7um from 61 search amp seid 61 12548150687335659873 基本思路 xff1a 采用Gaz

  • RGB-D SLAM 相关总结

    目录 一 RGB D SLAM是什么 xff1f 二 D435i说明 三 RGB D SLAM研究现状 1 现有的RGB D SLAM方法 1 1 前端 1 2 后端 1 3 闭环检测 1 4 制图 2 优秀RGB D SLAM介绍 2 1

  • VINS-Mono学习（一）——数据预处理

    void push back double dt const Eigen Vector3d amp acc const Eigen Vector3d amp gyr dt buf push back dt acc buf push back

  • VINS-Mono学习（四）——回环检测与重定位

    目录 1 闭环检测常用方法有哪些 xff1f 2 ORB SLAM2中Loop Closing的具体实现流程是怎样的 xff1f 3 VINS回环检测与重定位 四自由度位姿图优化 3 1 第一部分 xff1a 回环检测与重定位 3 1 1

  • LADRC的学习——总概

    作者 xff1a 墨心 日期 xff1a 2019 7 25 xff1b 学习LADRC结构 xff1a 1 学习PID的相关知识 xff0c 作为学习ADRC的基础铺垫 xff0c 在simulink中搭建模块 xff0c 通过调节参数

  • LADRC的学习——PID的学习

    PID部分的学习 上文介绍了ADRC的理论 xff0c 并试着按照自己的理解用Matab编程实现韩老师论文中的算法 xff0c 但是对调节参数和一些地方还不太懂 xff0c 因此我打算从头开始理解 xff0c 从PID的好坏开始学习理解 x

  • LADRC的学习——换被控对象进行仿真测试

    LADRC控制器的检验 用不同的被控对象测验 一 前文总结 这篇文章主要根据清华大学的硕士陈星写的论文 xff1a 自抗扰控制器参数整定方法及其热工过程中的应用 进行学习 参考文献为 xff1a 1 Zhiqiang Gao Scaling

  • ROS-3DSLAM（二）lvi-sam项目认识

    2021SC 64 SDUSC xff08 二 xff09 lvi sam项目认识 一 SLAM简介 SLAM是Simultaneous Localization and Mapping xff08 同时定位 43 建图 xff09 独立的

  • KMP算法——字符串匹配问题

    贴上原址 xff1a http www ruanyifeng com blog 2013 05 Knuth E2 80 93Morris E2 80 93Pratt algorithm html 感觉这篇文章讲得很不错 xff0c 很容易懂

  • ROS-3DSLAM（十六）lvi-sam项目总结

    2021SC 64 SDUSC 学习内容概览 本次的项目lvi sam主要分为两个大的模块 xff1a lidar模块和visual模块 我们小组学习先进行了lidar模块的学习 xff0c 然后进行的visual模块 每个模块都分成了若干

  • 项目实训 - 智能车系统 - 第八周记录

    项目实训 智能车系统 第八周记录 日期 xff1a 4 11 4 17 项目进度 本周工作进展 xff1a 完成了雷达驱动的编写 xff08 未测试 xff09 完成imu驱动的编写 xff08 未测试 xff09 与可视化部分进行对接 1

  • IIC详细解答+ 面试 + 代码

    目录 IIC背景提炼部分 xff08 面试 xff09 xff08 详解 43 代码 xff09 协议部分IIC部分初始化 IIC 的 IO 口IIC 开始信号IIC发送一个字节IIC 读一个字节响应ACK和非响应NACKIIC 停止信号

  • FreeRTOS内核学习高级篇-调度器使用

    学习资料链接 http wiki csie ncku edu tw embedded freertos https freertos blog csdn net article details 51190095 介绍 调度器是FreeRTO

  • ArduPilot日志系统探索（一）

    先把官方网站上日志相关的说明翻译下来 xff1a ArduPilot Documentation ArduPilot documentation 页面 xff1a Logs Copter documentation 与日志记录和分析相关的主

随机推荐

  • 暗影精灵4 安装双系统方法：win10 + ubuntu16.04 LTS

    准备工作 1 重要 xff1a 备份文件 xff0c 安装双系统有成功的 xff0c 也有失败的 xff0c 做好备份工作更保险 xff01 2 需要一个制作启动盘的U盘 gt 61 8G xff0c UltralSO刻录软件 xff0c

  • [现代控制理论]9_状态观测器设计_龙伯格观测器

    现代控制理论 11 现代控制理论串讲 完结 pdf获取 现代控制理论 10 可观测性与分离原理 观测器与控制器 现代控制理论 9 状态观测器设计 龙伯格观测器 现代控制理论 8 5 线性控制器设计 轨迹跟踪simulink 现代控制理论 8

  • [非线性控制理论]9_非线性控制理论串讲

    非线性控制理论 1 Lyapunov直接方法 非线性控制理论 2 不变性原理 非线性控制理论 3 基础反馈稳定控制器设计 非线性控制理论 4 反馈线性化 反步法 非线性控制理论 5 自适应控制器 Adaptive controller 非线

  • ubuntu16.04安装realsenseD435i sdk

    此处安装的intel realsense sdk2 0 xff0c 官方安装 xff0c 若从源码自行编译 xff0c 不可参考本教程 github原网址https github com IntelRealSense librealsens

  • C++中map用法

    一 头文件 include lt map gt map是一种以键 值 key value 存储的数据类型 map中的数据默认按照key的值从小到大排序 value若为Int类型 xff0c 默认为0 map不允许容器中有重复key值元素 m

  • 二维数组的子数组之和的最大值

    对于一维的数组 xff0c 要求其子数组之和的最大值很简单 xff0c 动态规划轻松解决 xff0c 复杂度O N span style background color rgb 255 255 255 font family none f

  • gazebo save world as 之后卡死问题的解决方法

    最近在学习ROS xff0c 后面在用gazebo做仿真的时候 xff0c 在gazebo中加入任意模型 xff0c 然后点击save world as然后卡死的问题一直无法解决 尝试过的思路比如更换版本 xff0c 下载源代码编译后安装

  • 这才是企业级的oss-spring-boot-starter

    本文主要讲解企业级OSS对象存储服务Spring Boot Starter制作 xff0c 开箱即用 xff0c 为项目进行赋能 基于AmazonS3协议 xff0c 适配市面上的对象存储服务如 xff1a 阿里云OSS 腾讯COS 七牛云

  • 项目管理-项目相关方管理

    识别相关方 相关方分析 会产生相关方清单和关于相关方的各种信息 xff0c 例如 xff0c 在组织内的位置 在项目中的角色 与项目的厉害关系 期望 态度 xff08 对项目的支持程度 xff09 xff0c 以及对项目信息的兴趣 权力 利

  • 分享关于AI的那些事儿

    机器人很厉害 给人治病的ibm 的Watson 沃森 击败世界围棋冠军的AlphaGo阿尔法狗 陪你聊天的机器人 数据标注 木马识别 恶意访问拦截 智能家居 但是17年首次出现了机器人获得国籍 这个机器人叫做索菲亚 这是一个类似人类的机器人

  • 408 知识点笔记——计组（总线、输入/输出系统）

    6 总线 总线的基本概念 分时和共享是总线的两个特点 xff0c 分时是指同一时刻只允许有一个部件向总线发送信息 xff0c 共享可以允许多个部件同时从总线上接收信息 总线特性 物理特性 xff1a 如插头与插座的几何尺寸 形状 引脚个数及

  • Ubuntu18.04安装Kalibr各种问题总结

    近期需要作相机与IMU的联合标定 xff0c 安装Kallibr过程遇到好多问题 xff0c 前前后后折腾了3天 xff0c 终于可以标定了 这里记录一下问题 xff0c 希望可以帮助更多人 1 catkin make过程中下载SuiteS

  • 01-搭建Vue脚手架（vue-cli）

    一 那么我们就从最简单的环境搭建开始 xff1a 安装node js xff0c 从node js官网下载并安装node xff0c 安装过程很简单 xff0c 一路 下一步 就可以了 xff08 傻瓜式安装 xff09 安装完成之后 xf

  • vscode打开终端的快捷键是啥? VScode打开终端的三种方法

    方法1 xff1a 打开终端的快捷方法 打开VScode后 xff0c 鼠标左键单击窗口顶部的 帮助 xff08 如下图红圈标注 xff09 xff0c 在下拉列表中找到 键盘快捷方式参考 xff08 如下图红框标注 xff09 鼠标左键点

  • VS Code保存后自动格式化Vue代码---Vetur

    在VS Code里面编辑Vue代码 xff0c 通常我们会安装插件Vetur xff0c 本次介绍的格式化代码也依赖于Vetur插件 具体见一下步骤 注 xff1a VS Code版本为1 74 3 1 安装插件Vetur 2 配置自动格式

  • vscode中怎样格式化js代码_vscode如何格式化代码

    vs code格式化代码的快捷键如下 xff1a 在Windows上 Shift 43 Alt 43 F 推荐学习 xff1a vscode入门教程 在Mac上 Shift 43 Option 43 F 在Ubuntu上 Ctrl 43 S

  • VsCode使用Ctrl+S保存代码自动格式化Html/Css/JS

    第一步 xff1a 点击文件 首选项 设置 xff08 快捷键 xff1a Ctrl 43 xff09 第二步 xff1a 在搜索框里面输入emmet xff0c 选择工作区 点击 在settings json 中编辑 xff08 红色框的

  • 百度面试基础问题

    上午百度面试 xff0c 我投的测试 xff0c 文三路伊美大酒店 xff0c 面了接近一个小时 xff0c 问了很多基础的东西 xff0c 我有些混淆也有些回答得不全面 xff0c 可能跪了 xff0c 记录一下面试题吧 xff0c 权当

  • vscode使用git

    1 vscode配置git 一 VS code 配置git 1 下载安装git 2 如果要在VS Code里面使用Git则需要在编辑器内配置git path xff08 1 xff09 windows系统 xff0c 打开cmd xff0c

  • 后台管理系统的权限控制与管理

    此文章根据视频教程进行整理前端面试官必问系列 后台系统的权限控制与管理 xff0c 建议搭配视频教程一起食用效果更佳 https www bilibili com video BV15Q4y1K79c 在Web 系统中 xff0c 权限很久

热门标签