vue3角色路由封装

在市面上很多网站都是左侧菜单栏+左侧内容页的样式,同时具有很多个角色,只是左边菜单栏显示的内容不一致罢了,有些人会单独写俩个页面来显示不同的角色,但是这样页面复用性不高,这个时候我们就需要动态路由(有些系统的路由是由后端返回,有些的是由前端提前记录好,本篇讲述的是前端记录好,但是其实后端返回概念是一样的就是需要在返回的结果中获取路由信息而已)

一般公共的路由我们会先存入到  router  的  routes  里面

比如:

const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: "/login",name: "login",component: () => import("@/views/login/index.vue"),},{path: "/register",name: "register",component: () => import("@/views/register/index.vue"),},,],
});

或者是存入到 basicRoute 中:

const basicRouter = [{path: "/login",name: "login",component: Login,},{path: "/register",name: "register",component: Register,},{path: "/forget",name: "forget",component: ForgetPwd,}
];const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: basicRouter,
});

然后一般获取动态路由的操作会在登录成功之后,来执行(我这里存入userStore里面的数据就比较简单了,只有身份和token,现实情况肯定不止我这么点信息的)

const res = await loginInAPI(form.value.account, form.value.password);if (res.data.data.success) {ElMessage.success("登录成功");userStore.setUser(res.data.roles, res.data.token);//身份信息 存储到store中setTimeout(() => {router.push("/");//登录成功后跳转主页界面}, 2000);} else {ElMessage.error(res.data.data.message);}

存储成功之后,他这里做了跳转,到主界面,这个时候我们就需要路由守卫来处理

在   router  文件夹下面的  index.ts 下:

router.beforeEach(async (to, from, next) => {// 判断有没有登录const userStore = useUserStore();//使用storeconst { isLogin, user } = storeToRefs(userStore);//必须使用这种方式if (to.name == "login") {next();return;}if (isLogin.value === false) {//如果还没有登录const res = await setRouter(user.value.roles);//异步请求方式设置 routesisLogin.value = true;//设置是否登录的值if (res === true) {next('/');} else next(false);return;} next();});

setRouter 方法

export const setRouter = async (roles: string) => {//导出这个函数return new Promise((resolve, reject) => {const myRouter: RouteRecordRaw = getRouter(roles);//获取 routesrouter.addRoute(myRouter);  //添加路由resolve(true);});
};

getRouter 这是在 utils 下面的一个  router.ts 文件  我把路由信息进行了封装放入了进去。需要注意的是  addRoute 时里面的 route 必须是一个对象

import type { RouteRecordRaw } from "vue-router";const studentRouter: RouteRecordRaw = {};//学生路由const teacherRouter: RouteRecordRaw = {};//老师路由export const getRouter = (roles: string): RouteRecordRaw => {if (identity === 'student') return studentRouter;else return teacherRouter;
};

这样子就实现了大概的逻辑,但是还是会有点问题,因为当你刷新页面的时候,你缓存的这些就没有了,可以借助  store 把路由信息存储在store里面,但是还是需要进行一步操作:

在 main.ts 中需要这样做,在页面进行刷新时,main.ts 的内容也会重新加载

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";import App from './App.vue'
import router from './router'
import { useUserStore } from './stores/userStore';// import "./mock/index.ts"; // mock 方式,正式发布时,注释掉该处即可const app = createApp(App)
const pinia = createPinia();pinia.use(piniaPluginPersistedstate);
app.use(pinia)const userStore=useUserStore()
userStore.setRoutes()

这里面的顺序一定不要搞错,一定要是先使用了 pinia 再去使用相关store,userStore.setRoutes()的内容也很简单,调用 router 文件夹下面的 index.ts 中的 setRouter 方法,而且我们在 store 里面使用了 router 里面的函数,位置也必须要在 引入 router 下面使用这个 store

import { ref } from "vue";
import { defineStore } from "pinia";
import { setRouter} from "@/router";export const useUserStore = defineStore("user",() => {const user = ref({roles: "",token: "",});const setUser = (roles: string, token: string) => {user.value.roles = roles;user.value.token = token;};const setRoutes = () => {setRouter(user.value.roles);};return { user, setUser, setRoutes };},{persist: true,}
);

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

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

相关文章

easyexcel的读写操作

easyexcel是基于java的读写excel的开源项目 --读写也可理解为上传和下载 写操作 一、引入依赖 <dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>3.0.5</version> </dependency> 二、封…

力扣 19删除链表倒数第N个结点

思路 双指针法&#xff0c;快指针用于与慢指针拉开距离&#xff0c;慢指针用于删除元素&#xff0c;越过慢指针后面的元素。 具体删除时&#xff0c;应该注意如果倒数第N个结点是头结点的话&#xff0c;slow指向的就是头结点&#xff0c;没有吧办法用 slow->next slow-&…

sql_exporter通过sql收集业务数据并通过prometheus+grafana展示

下载并解压安装sql_exporter wget https://github.com/free/sql_exporter/releases/download/0.5/sql_exporter-0.5.linux-amd64.tar.gz #解压 tar xvf sql_exporter-0.5.linux-amd64.tar.gz -C /usr/local/修改主配置文件 cd /usr/local/ mv sql_exporter-0.5.linux-amd64 s…

Electron 的open-file事件

在 Electron 中,open-file 事件是一个重要的事件,它允许开发者在应用程序已经运行的情况下,通过文件打开请求(如双击文件或在命令行中使用 open 命令打开文件)来捕获文件路径。以下是对 open-file 事件的详细解析: 触发条件 应用已经打开。用户通过双击与应用程序关联的…

google 浏览器插件开发简单学习案例:TodoList

参考&#xff1a; google插件支持&#xff1a; https://blog.csdn.net/weixin_42357472/article/details/140412993 这里是把前面做的TodoList做成google插件&#xff0c;具体网页可以参考下面链接 TodoList网页&#xff1a; https://blog.csdn.net/weixin_42357472/article/de…

SwiftSage:参考人脑双系统,结合快思和慢想的智能体,解决复杂任务同时降低成本

SwiftSage&#xff1a;参考人脑双系统&#xff0c;结合快思和慢想的智能体&#xff0c;解决复杂任务同时降低成本 提出背景解法拆解子解法1&#xff1a;SWIFT模块子解法2&#xff1a;SAGE模块模块整合和决策树 SwiftSage 工作流程效果 论文&#xff1a;SWIFTSAGE: A Generative…

5G赋能新能源,工业5G路由器实现充电桩远程高效管理

随着5G技术的广泛应用&#xff0c;新能源充电桩的5G应用正逐步构建起全新的生态系统。在数字化转型的浪潮中&#xff0c;新能源充电桩行业正迎来数字化改革。工业5G路由器的引入&#xff0c;为充电桩的远程管理提供了强有力的技术支持&#xff0c;新能源充电桩5G路由器网络部署…

共享充电桩语音ic方案,展现它的“说话”的能力

随着电动汽车的普及&#xff0c;充电设施的便捷性、智能化需求日益凸显&#xff0c;共享充电桩语音IC应运而生&#xff0c;成为连接人与机器、实现智能交互的桥梁。本文将为大家介绍共享充电桩语音ic的概述、应用词条以及优势&#xff0c;希望能够帮助您。 一、NV170D语音ic概述…

选购指南:如何挑选最适合的快手矩阵系统

在短视频风潮席卷的今天&#xff0c;快手作为其中的佼佼者&#xff0c;吸引了无数创作者和商家的目光。然而&#xff0c;想要在快手上脱颖而出&#xff0c;仅凭内容和创意是远远不够的。一个强大且适合的快手矩阵系统&#xff0c;将是你通往成功的重要钥匙。那么&#xff0c;如…

SEO域名外链生成工具PHP源码

两款不同版本的SEO超级外链工具PHP源码&#xff0c;网址外链-seo外链推广工具源码&#xff0c;SEO网站推广外链工具源码SEO域名外链生成工具PHP源码 _ 博客趣两款不同版本的SEO超级外链工具PHP源码&#xff0c;网址外链-seo外链推广工具源码&#xff0c;SEO网站推广外链工具源码…

Web前端:HTML篇(一)

HTML简介&#xff1a; 超文本标记语言&#xff08;英语&#xff1a;HyperText Markup Language&#xff0c;简称&#xff1a;HTML&#xff09;是一种用于创建网页的标准标记语言。 您可以使用 HTML 来建立自己的 WEB 站点&#xff0c;HTML 运行在浏览器上&#xff0c;由浏览器…

批量打断相交线——ArcGISpro 解决方法

在数据处理&#xff0c;特别是地理空间数据处理或是任何涉及图形和线条分析的场景中&#xff0c;有时候需要把相交的线全部从交点打断一个常见的需求。这个过程对于后续的分析、编辑、或是可视化展现都至关重要&#xff0c;因为它可以确保每条线都是独立的&#xff0c;避免了因…

.NET下支持多框架的托盘功能NotifyIconEx(WPF / WinForms / Avalonia / WinUI / MAUI / Wice)

支持 WPF / WinForms / Avalonia / WinUI / MAUI / Wice 应用。 先看效果&#xff1a; using NotifyIconEx;var notifyIcon new NotifyIcon() {Text "NotifyIcon",Icon Icon.ExtractAssociatedIcon(Process.GetCurrentProcess().MainModule?.FileName!)! }; not…

【论文速读】| LLMCloudHunter:利用大语言模型(LLMs)从基于云的网络威胁情报(CTI)中自动提取检测规则

本次分享论文&#xff1a;LLMCloudHunter: Harnessing LLMs for Automated Extraction of Detection Rules from Cloud-Based CTI 基本信息 原文作者&#xff1a;Yuval Schwartz, Lavi Benshimol, Dudu Mimran, Yuval Elovici, Asaf Shabtai 作者单位&#xff1a;Ben-Gurion…

golang长连接的误用

误用一&#xff1a;忘记读取响应的body 由于忘记读取响应的body导致创建大量处于TIME_WAIT状态的连接&#xff08;同时产生大量处于transport.go的readLoop和writeLoop的协程&#xff09; 在linux下运行下面的代码: package mainimport ("fmt""html"&qu…

第一弹:基于ABAP OLE技术实现对服务器文件进行读写操作

前言 最近遇到这样一个需求&#xff0c;需要对BW服务器上的文件进行下载的同时写入每个用户相对应的数据。之前的服务器模版是一个死模版&#xff0c;对于这样的要求&#xff0c;我就想到了OLE技术&#xff0c;那么什么是OLE技术呢&#xff1f; 一、什么是OLE技术&#xff1f…

Python 全栈体系【三阶】(三)

第一章 Django 七、静态文件 1. 概述 静态文件是指在WEB应用中的图像文件、CSS文件、Javascript文件。 2. 静态文件的配置 settings.py中关于静态文件的配置如下&#xff1a; STATICFILES_DIRS [BASE_DIR , static, ]STATIC_URL /static/其中&#xff1a; STATICFILES…

微服务架构下Mojo模型的创新应用:细粒度服务与智能优化

微服务架构下Mojo模型的创新应用&#xff1a;细粒度服务与智能优化 在当今快速发展的云计算和大数据时代&#xff0c;微服务架构以其灵活性、可扩展性和易于维护的特点&#xff0c;成为软件开发的主流趋势。Mojo模型&#xff0c;作为机器学习领域中的一种技术&#xff0c;通过…

C++——模板初阶 | STL简介

P. S.&#xff1a;以下代码均在VS2019环境下测试&#xff0c;不代表所有编译器均可通过。 P. S.&#xff1a;测试代码均未展示头文件stdio.h的声明&#xff0c;使用时请自行添加。 博主主页&#xff1a;Yan. yan.                        …

便携气象站:科技助力气象观测

在科技飞速发展的今天&#xff0c;便携气象站以其轻便、高效、全面的特点&#xff0c;正逐渐改变着气象观测的传统模式。这款小巧而强大的设备&#xff0c;不仅为气象学研究和气象灾害预警提供了有力支持&#xff0c;更为户外活动、农业生产等领域带来了诸多便利。 便携气象站是…