当前位置:网站首页 > 技术博客 > 正文

前端实现权限管理



权限控制,最常见的基本上有 2 种

  • 基于 的权限控制
  • 基于 的权限控制

这个两种到底有什么不同呢?

我们通过下图来分析一下

是基于 用户 -> 权限,直接为每个用户分配权限

基于 用户 -> 角色 -> 权限,以角色为媒介,来为每个用户分配权限

这样做的好处是,某个权限过于敏感时,想要将每个用户或者部分用户的权限去掉,就不需要每个用户的权限都操作一遍,只需要删除对应角色的权限即可

那在实际的开发中 是最常用的权限控制方案,就前端而言, 主要如何实现的呢?

主要就两个部分

  • 页面权限受控
  • 按钮权限受控

下面我们就来实现这两个部分

  • 页面权限
  • 按钮权限

页面的访问,我们都是需要配置路由表的,根据配置路由表的路径来访问页面

那么,我们控制了路由表,不就能控制页面的访问了吗?

实现思路

  • 前端根据不同用户信息,从后端获取该用户所拥有权限的路由表
  • 前端动态创建路由表

基本环境:

创建项目

 

打开项目, 运行一下

代码初始化,删除不必要的一些文件

我们创建几个新文件夹

写下基本的页面

 ​​​​​​

 
 
 

写下路由配置

  // remaining.ts const remainingRouter: AppRouteRecordRaw[] = [/pre>p>主要为了存放一些公共路由,没有权限页可以访问,比如登录页、404页面这些/p>p>因为是用 编写的,我们需要加一下声明文件,定义下 的类型/p>p>/p>pre>/pre>p>接下来编写,创建路由、导出路由/p>pre>/pre>p>在 中导入下/p>pre>/pre>p>接下来写下 Layout 架构/p>p>我们要实现的效果,是一个后台管理页面的侧边栏,点击菜单右边就能跳转到对应路由所在页面/p>p>创建/p>p>右边路由跳转页/p>p>侧边栏/p>p>作为 layout 架构的统一出口/p>pre>/pre>p>/p>p>上面是一种动态路由的固定写法,需要与的路由配置进行对应/p>p>其中最主要的就是 中的 ,这是为确定路由跳转对应页面的标识,没这个就跳不了/p>p>有一个小知识点/p>ul>
  • 拿到的地址是包括 和 在内的完整地址。该字符串是经过百分号编码的
  • 经过百分号编码的 URL 中的 段
  • /ul>pre>/pre>p>为了实现右边侧边栏,需要引入 来快速搭建/p>pre>/pre>p>改造一下,完整引入/p>pre>/pre>p>我们来编写下 侧边栏/p>pre>/pre>p>统一导出 layout 架构,加一点小样式/p>pre>/pre>p>运行一下/p>p>/p>p>通常我们实现页面权限管理,比较常见的方案是,有权限的路由信息由后端传给前端,前端再根据路由信息进行渲染/p>p>我们先安装下 模拟下后端传过来的数据/p>ul>
  • /ul>pre>/pre>ul>
  • /ul>pre>/pre>p>好了,我们把模拟的路由数据,加到本地路由中/p>p>/p>pre>/pre>p>/p>p>/p>p>报错了,为什么呢?/p>p>对比路由表的数据,原来,组件模块的数据与公共路由的数据不一致/p>p>我们需要把模拟后端传过来的数据处理一下/p>p>/p>p>/p>pre>/pre>p>再修改下 ​​​​​​​​​​​​​​/p>pre>/pre>p>引入一下/p>pre>/pre>p>可以正常访问了/p>p>除了页面权限,外我们还有按钮权限/p>p>可以通过自定义指令来完成, 中定义一下/p>p>/p>pre>/pre>p>需要挂载到 ​​​​​​​/p>pre>/pre>p>还是在 那里加一下模拟数据/p>p>​​​​​​​​​​​​​​​​​​​​​/p>pre>/pre>p>加入几个按钮,使用自定义指令​​​​​​​/p>pre>/pre>p>这个权限没有配置,无法显示/p>p>加一下权限/p>p>用户权限我们使用 自定义指令,其原理是通过删除当前元素,来实现隐藏/p>p>如果使用 的标签页呢/p>p>我们在 src/views/home.vue 写一下基本样式​​​​​​​/p>pre>/pre>p>我们加下按钮权限控制​​​​​​​/p>pre>/pre>p>/p>p>/p>p>/p>p>因为这个权限我们没有配置,标签页内容隐藏了,这没问题/p>p>但是,标签没隐藏啊,通常要是标签一没权限,应该是标签项、和标签内容都隐藏才对/p>p>为什么会这样呢?/p>p>我们在 自定义指令中,打印下获取到的元素/p>p>/p>p>id 为 、 元素对应位置在哪里,我们找一下 需要先把指令去掉,因为元素都被我们删除的话,我们看不到具体DOM结构/p>p>对比一下,明显可以看出 自定义指令获取到只是标签内容的元素/p>p>那怎么办?/p>p>解决办法一:根据当前元素,一层层找到标签项,然后删除,这样是可以。但是这样太麻烦了,也只能用于标签页,那要是其他组件有这样的问题咋办/p>p>解决办法二:我们写一个函数判断权限是否存在,再通过 进行隐藏/p>pre>/pre>blockquote> ​​​​​​
     
    /blockquote>p>src/views/home.vue,引入下 ​​​​​​​/p>pre>/pre>p>/p>p>页面权限/p>p>不同用户,具有不同页面访问权限,对应权限的路由信息由后端返回。 本地路由 + 后端传过来的路由 = 菜单路由/p>p>按钮权限/p>p>根据不同用户,后端传过来每个按钮的按钮权限字符串,前端根据自定义指令,判断该按钮权限字符串是否存在 从而显示或者隐藏/p>p>扩展/p>p>一些特殊情况下,自定义指令隐藏无法满足我们想要的效果,我们可以定义一个公共函数检测权限是否存在,再通过 进行隐藏/p>p>/p>

  • 上一篇: oracle sysctl
  • 下一篇: shell脚本加密解密
  • 版权声明


    相关文章:

  • oracle sysctl2024-10-28 22:30:01
  • 圆圈符号怎么打出来圆圈符号大全2024-10-28 22:30:01
  • oracle rac tns配置2024-10-28 22:30:01
  • 跨境电商shopee平台2024-10-28 22:30:01
  • c++ udp socket2024-10-28 22:30:01
  • shell脚本加密解密2024-10-28 22:30:01
  • 径向基网络2024-10-28 22:30:01
  • 电容并在电源上的作用2024-10-28 22:30:01
  • 五子棋对局视频2024-10-28 22:30:01
  • 超线程技术开启还是关闭2024-10-28 22:30:01