vue3 根据用户权限控制左侧菜单和路由拦截

目录

前言

整体思路

详细开发

1.左侧菜单的显隐控制

2.控制路由权限

补充权限控制

总结


前言

我这里是vue3开发的一个后台管理系统,所以涉及用户权限管理,以及页面权限等,其他模块部分可以查看专栏,这里只对怎么实现根据用户权限控制左侧菜单和路由。

        用户权限控制路由表和左侧菜单一般是带权限的系统的通用功能,在我还在上大学的时候,实现这个功能感觉很费劲,因为那时候对Vue一知半解,很多权限模模糊糊地实现了,实际上我现在也不能说全部了解,但是经过了几个项目,脑子里有了大概的思路。     

整体思路

用户权限我认为大可以分成两类:控制访问哪些页面,控制能执行哪些操作。

        前者要实现用户只能查看有权限的页面,比如,左侧菜单的菜单栏都是根据权限过滤的,跳转路由时要判断权限(路由守卫的工作),后者要做到用户只能操作有权限的功能,比如点击新建、修改按钮等。后者实现也很简单,好的方法是加一个权限的指令,哪个地方需要判断权限就调用,这里先只讨论前者的实现。

        如何实现这个功能,拆解为两部分,首先我们要知道用户有哪些菜单的权限,通常是通过接口获取,接着我们要知道用户有哪些路由的权限,比如'/login','/401','/user',这些页面,当然有时候401,500这些页面也会配置在白名单里,不受权限管理。

总结有两部分的权限:菜单权限,路由权限。

这里实现的功能如下:

用户有菜单A,B,C的权限,那么左侧菜单就显示ABC,

然后用户有路由 '/A','/B','/C','/D','/401','/login' 的权限,

那么用户可以访问这几个页面。

假如,用户没有'/B'的权限,那么点击菜单B也会跳到401页面。

  具体的功能明白了,那就开始详细的开发吧。

详细开发

我先说下我具体的思路。

        首先用户需要获取两部分权限,加上这两个接口,在哪里调用呢,肯定是左侧菜单渲染前,路由表生成前。

        前者应该在sidemenu的组件页进行,一般我们都会有这个页面对吧,根据获取到的左侧菜单,进行渲染,这样就完成了第一部分工作。

        至于路由权限的控制,那么肯定需要进行路由守卫的帮助,所以一般我会在router下进行,添加路由守卫拦截,每次router.push的时候,判断一下是否有权限。至于权限从哪里来,我这里是从用户的信息里获取到的,一般系统会有获取用户信息的接口吧,这里会有一些用户的个人配置和基本信息。

        我是在登录后,获取用户信息,存在了store里,然后nvabar里也获取了用户信息,执行同样的操作,然后这样就避免了每次刷新之后信息丢失的问题,当然用户信息可以放在storage或者cookie里,但是为了信息安全,还是别这样做了。

1.左侧菜单的显隐控制

左侧菜单的显隐我是根据权限显示的,没有权限则,没有这个菜单项,这样比较简单。

我显示一下我的数据格式,我获取到的菜单权限是一个数组,每一个对象里有对应路由的id和名字,我需要根据权限显示对应的菜单,如下:

 

这里是全部的路由表的数据:

 

其中我将需要权限的页面都放在了path='/'的children里。 

下面我实现的具体代码吧

const routes = ref()
onMounted(async () => {
  await getPermissionRoutes()
  routes.value = handleAdminMenus()
})

const handleAdminMenus = () => {
  const filteredRoutes = allRoutes.value.reduce((acc, route) => {
    if (route.path == '/') {
      const filteredChildren = route.children.filter((child) => {
        return adminMenus.value.some((item) => item.table_id === child.name)
      })

      if (filteredChildren.length > 0) {
        acc.push({ ...route, children: filteredChildren })
      }
    }

    return acc
  }, [])
  return filteredRoutes[0].children
}

let adminMenus = ref()
const getPermissionRoutes = async () => {
  await getAdminMenus().then((res) => {
    adminMenus.value = res

    console.log(adminMenus.value, res)
    return adminMenus.value
  })
}
<template>
  <div id="Sidebar" class="reset-menu-style">
    <!--logo-->
    <Logo v-if="settings.sidebarLogo" :collapse="!sidebar.opened" />
    <!--router menu-->
    <el-scrollbar>
      <el-menu
        class="el-menu-vertical"
        :collapse="!sidebar.opened"
        :default-active="activeMenu"
        :collapse-transition="false"
        mode="vertical"
      >
        <sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />
      </el-menu>
    </el-scrollbar>
  </div>
</template>

我上面主要是将获取到权限菜单和路由表做了一个对应比较,只让菜单显示有权限的路由,那么自然也只能点击有权限的路由了,比如菜单ABC,当然如果输入路径‘/404’,此刻也是可以跳转的,如何后面控制了路由守卫,如果没有404的页面权限,那么输入404 ,应该会跳到401页面,这里先说明一下。

接下来我们就实现这部分功能——只能根据权限进入相应的页面

2.控制路由权限

这里的还是比较简单的,主要就以下一些功能

当然这是比较简单的一个拦截,如果需要做一些其他操作比如,生成动态路由,或者添加权限等,都可以在【判断是否有当前权限】这之后进行。

import router from '@/router'
import { progressClose, progressStart } from '@/hooks/use-permission'
import { useBasicStore } from '@/store/basic'
import { langTitle } from '@/hooks/use-common'
import settings from '@/settings'
import { Message } from '@/hooks/use-element'
import { userInfoReq } from '@/api/user'
//路由进入前拦截
//to:将要进入的页面 vue-router4.0 不推荐使用next()
const whiteList = ['/login', '/404', '/401', '/loading'] // no redirect whitelist
router.beforeEach(async (to) => {
  progressStart()
  document.title = langTitle(to.meta?.title) // i18 page title
  const basicStore = useBasicStore()

  // not login
  if (!settings.isNeedLogin) {
    // basicStore.setFilterAsyncRoutes()
    return true
  }
  if (whiteList.indexOf(to.path) !== -1) {
    return true
  }

  // 是否已登录
  if (basicStore.token) {
    // 已登录
    if (to.path === '/login') {
      return '/'
    } else {
      const isGetUserInfo = basicStore.getUserInfo
      // 是否已获取用户信息和权限
      if (isGetUserInfo) {
        // 判断权限
        const userPermissions = basicStore.userPermissions || []
        const hasPermission = userPermissions.some((permission) => permission === to.path)
        if (hasPermission) {
          // basicStore.setFilterAsyncRoutes()
          return true
        } else {
          // 没有权限,跳转到 401 页面
          return '/401'
        }
      } else {
        try {
          // 获取用户信息和权限
          userInfoReq()
            .then((res) => {
              basicStore.setUserInfo({
                userInfo: res
              })
              // 判断权限
              const userPermissions = basicStore.userPermissions || []
              const hasPermission = userPermissions.some((permission) => permission === to.path)
              if (hasPermission) {
                // basicStore.setFilterAsyncRoutes()
                return true
              } else {
                // 没有权限,跳转到 401 页面
                return '/401'
              }
            })
            .catch((err) => {
              basicStore.setUserInfo({
                userInfo: {}
              })
              Message(err || '获取用户信息失败', 'error')
              return '/401'
            })
        } catch (err) {
          console.log('permission-catch-error', err)
          return `/login?redirect=${to.path}`
        }
      }
    }
  } else {
    // 未登录,跳转到登录页面
    if (!whiteList.includes(to.path)) {
      return `/login?redirect=${to.path}`
    } else {
      return true
    }
  }
})
//路由进入后拦截
router.afterEach(() => {
  progressClose()
})

这里留了一个口子,basicStore.setFilterAsyncRoutes(),如果登录后需要生成动态路由,则可以在这里进行。,但是我们的路由比较简单,就不做这些啦。

补充权限控制

这里补充一些登录后的路由跳转到权限控制

系统里我写了一个loading页面,系统登录后先跳到这个页面,这个页面会获取当前用户的菜单权限和用户权限,这个页面的作用如下:

如果当前菜单首页,那么这时会跳至首页。

如果当前有权限的菜单有BCD里没有默认跳转页面,那么就根据当前的菜单顺序,跳转至第一个菜单页,那么会去往B页面。

所以这个页面的目的也很明显啦,就是一个中转页,如果系统不小心去往了401,404,那么返回首页的时候,这个首页也会去往loading,这样就可以在用户没有首页权限时,也能有一个当前权限的【首页】,总要给用户一个页面的去处嘛。 

这些功能的实现也很简单,如下:

let adminMenus = ref()
onMounted(async () => {
  if (basicStore.adminMenus?.length > 0) {
    adminMenus.value = basicStore.adminMenus
    goToPath()
  } else {
    await getPermissionRoutes()
    goToPath()
  }
})

const goToPath = () => {
  const userPermissions = basicStore.userPermissions || []
  const hasPermission = userPermissions.some((permission) => permission === adminMenus.value[0].table_id)
  if (userPermissions.some((permission) => permission === '/homePage')) {
    router.push(`/homePage`)
  } else {
    if (adminMenus.value[0].type === 'page' && hasPermission) {
      router.push(adminMenus.value[0].table_id)
    } else if (hasPermission) {
      router.push(`/t${adminMenus.value[0].table_id}`)
    }
  }
}

总结

其实权限控制一般都跟业务关联很强,经常会在基础的上面那种权限控制上添加新的,所以很多时候在后期加新需求时,哪怕对权限很熟悉,也会有时候遇到一些bug,只要熟悉每一个组件的加载顺序,多加打印,就能慢慢解决~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/275735.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

异步通知

文章目录 一、异步通知1、应用场景2、执行流程&#xff08;基于读取按键值的情景&#xff09;2.1、应用程序具体做什么&#xff1f;2.2、驱动程序具体做什么&#xff1f; 三、程序1、驱动程序2、测试应用程序 三、总结 一、异步通知 1、应用场景 当应用程序不想休眠时&#x…

记录一下亿级别数据入库clickhouse

需求背景 公司的业务主要是广告数据归因的&#xff0c;每天的pv数据和加粉数据粗粗算一下&#xff0c;一天几千万上亿是有的。由于数据量大&#xff0c;客户在后台查询时间跨度比较大的数据时&#xff0c;查询效率就堪忧。因而将数据聚合后导到clickhouse进行存储&#xff0c;…

数据库系统原理例题之——SQL 与关系数据库基本操作

SQL 与关系数据库基本操作 第四章 SQL 与关系数据库基本操作【例题】一 、单选题二 、填空题三 、简答题四 、设计题 【答案&解析】一、单选题二、填空题三、简答题四、设计题 【延伸知识点】【延伸知识点答案&解析】 第四章 SQL 与关系数据库基本操作 【例题】 一 、…

视频美颜SDK趋势畅想:未来发展方向与应用场景

当下&#xff0c;视频美颜SDK正不断演进&#xff0c;本文将深入探讨视频美颜SDK的发展趋势&#xff0c;探讨未来可能的方向和广泛的应用场景。 1.深度学习与视频美颜的融合 未来&#xff0c;我们可以期待看到更多基于深度学习算法的视频美颜SDK&#xff0c;为用户提供更高质量…

国标标准和行业标准使用介绍

场景 我现在所在行业是交通行业&#xff0c;主要做城市交通信控相关的工作&#xff0c;后续可能会涉及高速、收费站、稽核收费等业务场景在做产品开发时&#xff0c;我们需要有一个标准可以参考&#xff0c;这些标准必须是公认的&#xff0c;这时就用到了 国家标准、行业标准等…

Python流星雨完整代码

文章目录 环境需求完整代码详细分析环境需求 python3.11.4PyCharm Community Edition 2023.2.5pyinstaller6.2.0(可选,这个库用于打包,使程序没有python环境也可以运行,如果想发给好朋友的话需要这个库哦~)【注】 python环境搭建请见:https://want595.blog.csdn.net/arti…

企业数据可视化-亿发数据化管理平台提供商,实现一站式数字化运营

近些年来&#xff0c;国内企业数据化管理升级进程持续加速&#xff0c;以物联网建设、人工智能、大数据和5G网络等新技术的发展&#xff0c;推动了数字经济的蓬勃发展&#xff0c;成为维持经济持续稳定增长的重要引擎。如今许多国内中小型企业纷纷摒弃传统管理模式&#xff0c;…

linux基础开发工具使用

文章目录 一. yum命令yum的使用 二.vim命令&#xff08;写代码&#xff09;各模式的互相转化命令模式光标移动的命令复制&#xff0c;粘贴&#xff0c;剪切&#xff0c;撤销撤销字符的转换字符的添加和删除查找注释清除注释 替换模式视图模式 裸的vim也可支持多文本编译vim 报错…

Cookie的详解使用(创建,获取,销毁)

文章目录 Cookie的详解使用&#xff08;创建&#xff0c;获取&#xff0c;销毁&#xff09;1、Cookie是什么2、cookie的常用方法3、cookie的构造和获取代码演示SetCookieServlet.javaGetCookieServlet.javaweb.xml运行结果如下 4、Cookie的销毁DestoryCookieServletweb.xml运行…

docker学习(十九、network使用示例bridge)

文章目录 一、容器网络分配情况1.启动容器2.查看容器的network3.容器网络分配 二、bridge1.bridge详细介绍2.实践bridge两两匹配3.创建network&#xff0c;默认bridge network相关内容&#xff1a; docker学习&#xff08;十八、network介绍&#xff09; docker学习&#xff08…

浅学Vue3

安装 vue项目 npm init vuelatest 回车装包 npm install 路由 安装 Router npm install vue-router4 -S项目根目录新建 router --> index.js vue2中 index.jsimport Vue from vue; import VueRouter from vue-router; import Home from ../views/Home.vue;Vue.use(V…

Linux操作系统极速入门[常用指令](安装jdk,MySQL,nginx),以及在linux对项目进行部署。

linux概述&#xff1a; Linux是一套免费使用和自由传播的操作系统 我们为什么要学&#xff0c;Linux&#xff1f; 主流操作系统&#xff1a; linux系统版本&#xff1a; 内核版&#xff1a; 由linux核心团队开发&#xff0c;维护 免费&#xff0c;开源 负责控制硬件 发行版&…

Vulnhub-Al-Web-1.0 靶机复现完整过程

一、信息收集 1.主机发现 arp-scan -l2.端口扫描 nmap -sV -p- 192.168.200.16PORTSTATESERVICEVERSIONMAC Address80/TCPOpenhttpApache httpd00:0C:29:C4:1B:78 (VMware) 3.目录扫描 python dirsearch.py -u http://192.168.200.16扫描出来这两个文件&#xff0c;首先先…

关于SQL时间盲注(基于sleep函数)的手动测试、burpsuite爆破、sqlmap全自动化注入

SQL时间注入是一种常见的SQL注入攻击方式&#xff0c;攻击者通过在SQL语句中注入时间相关的代码&#xff0c;来获取敏感信息或者执行非法操作。其基本原理如下&#xff1a; 攻击者向Web应用程序中输入一段恶意代码&#xff0c;通过SQL语句查询数据库&#xff0c;并注入时间相关…

【论文阅读】Resource Allocation for Text Semantic Communications

这是一篇关于语义通信中资源分配的论文。全文共5页&#xff0c;篇幅较短。 目录在这里 摘要关键字引言语义通信资源分配贡献公式符号 系统模型DeepSC TransmitterTransmission ModelDeepSC Receiver 语义感知资源分配策略Semantic Spectral Efficiency &#xff08;S-SE&#…

ClickHouse基础知识(二):ClickHouse 安装教程

1. 准备工作 1.1 确定防火墙处于关闭状态 1.2 CentOS 取消打开文件数限制 &#xff08;1&#xff09;在 hadoop101 的 /etc/security/limits.conf 文件的末尾加入以下内容 sudo vim /etc/security/limits.conf&#xff08;2&#xff09;在 hadoop101 的/etc/security/limits.…

主编夜话,2023 技术圈儿大事件盘点丨 RTE 开发者日报 Vol.115

开发者朋友们大家好&#xff1a; 这里是「 RTE 开发者日报 」&#xff0c;每天和大家一起看新闻、聊八卦。我们的社区编辑团队会整理分享 RTE &#xff08;Real Time Engagement&#xff09; 领域内「有话题的 新闻 」、「有态度的 观点 」、「有意思的 数据 」、「有思考的 文…

netty trojan

参考代码&#xff1a;https://github.com/kdyzm/trojan-client-netty 参考博客&#xff1a; github代码作者的博客&#xff1a;https://blog.kdyzm.cn/post/71 trojan-go介绍&#xff1a;https://p4gefau1t.github.io/trojan-go/developer/trojan/ trojan协议介绍&#xff1a;h…

Python 进阶(十八):配置文件(configparser 模块)

大家好&#xff0c;我是水滴~~ configparser模块是Python标准库中的一个模块&#xff0c;用于解析配置文件。它提供了一种简单而灵活的方式来读取、修改和写入INI格式的配置文件。本文将介绍该模块是如何操作配置文件的。 文章中包含大量的示例代码&#xff0c;希望能够帮助新…

Google Ad帐号被封?这几个关键点看好

海外广告投放工作中&#xff0c;账号是非常重要的环节。与在Facebook上运行广告相比&#xff0c;运行Google Ads在代理选择方面通常没有那么严格&#xff0c;因为 Google 对 IP 使用并不那么严格。但是&#xff0c;这并不意味着您可以不加考虑地使用任何代理IP。在本文中&#…