vue3-element-admin 去掉登录

1.src/router/index 去掉登录路由

  // {//   path: "/login",//   component: () => import("@/views/login/index.vue"),//   meta: { hidden: true },// },

2./src/plugins/permission修改 未登录

import type {NavigationGuardNext,RouteLocationNormalized,RouteRecordRaw,
} from "vue-router";import NProgress from "@/utils/nprogress";
import { isLogin } from "@/utils/auth";import router from "@/router";
import { usePermissionStore, useUserStore } from "@/store";export function setupPermission() {// 白名单路由const whiteList = ["/login"];router.beforeEach(async (to, from, next) => {NProgress.start();if (isLogin()) {if (to.path === "/login") {// 如果已登录,跳转到首页next({ path: "/" });NProgress.done();} else {const userStore = useUserStore();const hasRoles =userStore.user.roles && userStore.user.roles.length > 0;if (hasRoles) {// 如果未匹配到任何路由,跳转到404页面if (to.matched.length === 0) {next(from.name ? { name: from.name } : "/404");} else {// 如果路由参数中有 title,覆盖路由元信息中的 titleconst title =(to.params.title as string) || (to.query.title as string);if (title) {to.meta.title = title;}next();}} else {const permissionStore = usePermissionStore();try {await userStore.getUserInfo();const dynamicRoutes = await permissionStore.generateRoutes();dynamicRoutes.forEach((route: RouteRecordRaw) =>router.addRoute(route));next({ ...to, replace: true });} catch (error) {console.error(error);// 移除 token 并重定向到登录页,携带当前页面路由作为跳转参数await userStore.resetToken();redirectToLogin(to, next);NProgress.done();}}}} else {// 未登录if (whiteList.includes(to.path)) {// 在白名单,直接进入next(); } else {// 不在白名单,重定向到登录页const permissionStore = usePermissionStore();const dynamicRoutes = await permissionStore.generateRoutes();dynamicRoutes.forEach((route: RouteRecordRaw) =>router.addRoute(route));next(); //redirectToLogin(to, next);NProgress.done();}}});router.afterEach(() => {NProgress.done();});
}/** 重定向到登录页 */
function redirectToLogin(to: RouteLocationNormalized,next: NavigationGuardNext
) {const params = new URLSearchParams(to.query as Record<string, string>);const queryString = params.toString();const redirect = queryString ? `${to.path}?${queryString}` : to.path;next(`/login?redirect=${encodeURIComponent(redirect)}`);
}/** 判断是否有权限 */
export function hasAuth(value: string | string[],type: "button" | "role" = "button"
) {const { roles, perms } = useUserStore().user;// 超级管理员 拥有所有权限if (type === "button" && roles.includes("ROOT")) {return true;}const auths = type === "button" ? perms : roles;return typeof value === "string"? auths.includes(value): value.some((perm) => auths.includes(perm));
}

3.src/store/moudles/permission 修改generateRoutes

  /*** 生成动态路由*/function generateRoutes() {return import('@/router').then(({ constantRoutes }) => {routes.value  = constantRoutes;return constantRoutes;});// return new Promise<RouteRecordRaw[]>((resolve, reject) => {//   MenuAPI.getRoutes()//     .then((data) => {//       const dynamicRoutes = transformRoutes(data);//       routes.value = constantRoutes.concat(dynamicRoutes);//       resolve(dynamicRoutes);//     })//     .catch((error) => {//       reject(error);//     });// });}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CentOS 9 Stream 上安装 Redis

CentOS 9 Stream 上安装 Redis CentOS 9 Stream 上安装 RedisCentOS 9 Stream 上卸载 Redis CentOS 9 Stream 上安装 Redis 在 CentOS 9 Stream 上安装 Redis&#xff0c;可以按照以下步骤进行&#xff1a; 更新系统包&#xff1a; sudo dnf update -y安装 Redis&#xff1a; …

NLP算法工程师精进之路:顶会论文研读精华

1.学术能力培养 全部论文资料下载&#xff1a; 将论文和 GitHub 资源库匹配 papers with code https://paperswithcode.com/OpenGitHub 新项目快报Github pwc&#xff1a;https://github.com/zziz/pwc GitXiv&#xff1a;http://www.gitxiv.com/ 文章撰写 Overleaf [Autho…

01_AI编程案例展示:借助AI轻松爬取海量网盘链接

爬虫案例展示 今天,我们将展示如何利用AI快速开发一个网络爬虫&#xff0c; 使用的工具是Python和Claude 3.5 Sonnet(国内可用豆包替代) 我们的目标是爬取panhub.fun网站上的夸克网盘链接, 即使你是编程新手,也可以轻松完成这样的任务。 案例1-批量爬取panhub网盘整合包 下…

【C++动态规划 01背包】2787. 将一个数字表示成幂的和的方案数

本文涉及知识点 C动态规划 C背包问题 LeetCode2787. 将一个数字表示成幂的和的方案数 给你两个 正 整数 n 和 x 。 请你返回将 n 表示成一些 互不相同 正整数的 x 次幂之和的方案数。换句话说&#xff0c;你需要返回互不相同整数 [n1, n2, …, nk] 的集合数目&#xff0c;满…

websocket的使用

websocket的封装&#xff0c;面对后端为服务架构 // websocket.js import Vue from vue;class WebSocketService {constructor() {this.socket null;this.state Vue.observable({isConnected: false,currentUrl: ,retries: 0,maxRetries: 5,reconnectInterval: 3000});this.…

一分钟学会Python基础

Python 是一种广泛使用的高级编程语言&#xff0c;因其简洁和易读的语法而受到欢迎。下面是一些 Python 基础知识的概述&#xff1a; 1. 安装 Python 1.下载: 你可以从 Python 官网 下载适合你操作系统的版本。 2.安装: 安装过程中&#xff0c;确保勾选 "Add Python to …

vue下载安装

目录 vue工具前置要求&#xff1a;安装node.js并配置好国内镜像源下载安装 vue 工具 系统&#xff1a;Windows 11 前置要求&#xff1a;安装node.js并配置好国内镜像源 参考&#xff1a;本人写的《node.js下载、安装、设置国内镜像源&#xff08;永久&#xff09;&#xff…

ASP.NET Core 应用程序的Startup笔记

在 ASP.NET Core 中&#xff0c;Startup 类是用于配置应用程序的服务和请求管道的地方。 默认情况下&#xff0c;Visual Studio 2022 创建的 ASP.NET Core Web API 项目可能不再包含 Startup 类&#xff0c;而是直接在 Program.cs 中进行配置。这是因为从 .NET 6 开始&#xf…

计算机毕业设计——ssm基于Java的酒店管理系统的设计与实现演示录像2021

作者&#xff1a;程序媛9688开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等。 &#x1f31f;文末获取源码数据库&#x1f31f;感兴趣的可以先收藏起来&#xff0c;还有大家在毕设选题&#xff08;免费咨询指导选题&#xff09;&#xff0…

Spring整合Mybatis过程

配置文件 springConfig --> [jdbcConfig mybatisConfig] jdbc配置文件进行基本的数据库连接池配置 mybatis配置文件进行SqlSessionFactory Bean 和 MapperScannerConfigurer Bean的创建 在Spring容器启动时&#xff0c;系统会根据配置创建并初始化所有MyBatis所需的Bean…

光纤中光的散射

什么现象是光的散射&#xff1f; 辐射在不均匀介质中传播时&#xff0c;会产生偏离光的入射方向的光。 背向散射光分为哪些&#xff1f; 瑞利散射、布里渊散射和拉曼散射。 瑞利散射的原理是&#xff1f; 瑞利散射是由微粒的弹性碰撞而产生的&#xff0c;所以散射前后光波…

Java Executor ScheduledFuture 源码

前言 相关系列 《Java & Executor & 目录》《Java & Executor & ScheduledFuture & 源码》《Java & Executor & ScheduledFuture & 总结》《Java & Executor & ScheduledFuture & 问题》 涉及内容 《Java & Executor &…

Kafka 客户端工具使用分享【offsetexplorer】

前言&#xff1a; 前面我们使用 Spring Boot 继承 Kafka 完成了消息发送&#xff0c;有朋友会问 Kafka 有没有好用的客户端工具&#xff0c;RabbitMQ、RocketMQ 都有自己的管理端&#xff0c;那 Kafka 如何去查看发送出去的消息呢&#xff1f; 本篇我们就来分享一个好用的工具…

远程控制项目第一天

使用C开发&#xff0c;git进行版本控制&#xff0c; 关于远程项目的思考 需求分析 文件需求 1.观察文件 2.打开文件 3.下载文件 4.删除文件 观察需求 1.远程监控 控制需求 1.鼠标控制 2.键盘控制 3.锁机/解锁 技术分析 服务器部署在被控端 网络编程 文件处理 鼠标处理 图像处…

antd 5X中 tree属性结构,自定义菜单,右键菜单实现方式

第一种方式 使用自定义渲染节点 titleRender <TreetitleRender{titleRender}autoExpandParent{autoExpandParent}fieldNames{fieldNames}treeData{treeData}></Tree> 重要代码 titleRender实现方式 const menu (<Menuitems{[{key: add,label: <span>新增…

flume系列之:flume机器做条带划分提高磁盘性能和吞吐量的详细步骤

flume系列之:flume机器做条带划分提高磁盘性能和吞吐量的详细步骤 磁盘条带划分新磁盘直接条带划分步骤有数据的磁盘做条带划分步骤磁盘条带划分 磁盘条带划分是将一个文件或数据块分散存储在多个物理磁盘上的技术。它可以提高磁盘的性能和吞吐量。以下是磁盘做了条带划分后可…

六、栈————相关算法探讨(持续更新中)

栈————相关算法探讨 前言一、有效的括号1.1 思路分析1.2 解法探讨1.2.1 一次 for 循环&#xff0c;左括号入栈1.2.2 一次 for 循环&#xff0c;左括号入栈&#xff08;使用字典&#xff09;1.2.3 一次 for 循环&#xff0c;右括号进栈1.2.4 一次 for 循环&#xff0c;右括号…

【日常记录-Java】Windows下查看Java进程完整的启动命令

1. 简介 jps是Java Virtual Machine Process Status Tool的缩写&#xff0c;其会列出所有正在运行的Java进程ID以及类名。 wmic是Windows Management Instrumentation Command-line的缩写&#xff0c;其允许用户与wmi服务进行交互&#xff0c;提供了一种标准化的方法来访问和操…

ctfshow(151->154)--文件上传漏洞--.user.ini

Web151 进入界面&#xff1a; 审计&#xff1a; 提示是前台校验。 存在图片上传。 思路&#xff1a; 先编写一个一句话木马文件&#xff1a; //shell.php <?php eval($_POST[1]); ?>既然是前端校验&#xff0c;我们查看页面源代码找到相关的校验内容&#xff1a…

Ubuntu使用Tesla P4配置Anaconda+CUDA+PyTorch

我们之前测试了在Windows系统如何安装Tesla M4&#xff08;成了&#xff01;Tesla M4Windows 10AnacondaCUDA 11.8cuDNNPython 3.11&#xff09;&#xff0c;前面安装好了Ubuntu 22.04.4的操作系统&#xff08;Ubuntu 22.04.4安装Docker引擎&#xff09;。今天&#xff0c;简单…