vue3项目登录成功后根据角色菜单来跳转指定页面(无首页)

前言:需求不想要首页,登录什么角色跳转到这个角色经常使用的页面。(例如:审核者角色的人输入用户名密码成功后就自动跳转到待审核的页面,仓库管理员登录成功则自动跳转到仓库列表)

需要解决的点和想法:

1.登录成功后,后台获取登录用户的角色信息 ,并包含该角色所包含的所有菜单列表和常用列表(需要)。将该信息存入到公共信息中,本文中 Cookie、SessionStorage、LocalStorage 中选择的是 LocalStorage ,

复制代码
        localStorage.setItem("roleName", data.user.roleName);

菜单列表和角色列表,需要含类似于若依项目菜单列表

角色管理

2.原本项目登录成功默认跳转到的地方是首页。所以跳转处'/',修改为:根据角色名字来跳转,(这一块逻辑也可以改为,role下包含常用的路径,直接push('常用路径'))

复制代码
//根据角色跳转
if(localStorage.getItem("roleName") === "管理员"){
    await router.push('/archivedManage')
}else if(localStorage.getItem("roleName") === "确认者"){
    await router.push('/checkManage')
}else{
    await router.push('/reviewManage')
}

3.404页面修改:正常项目都是找不到路径或者路径异常则会刷404页面,然后3s后自动跳转到'/' ,而这个就是首页,但是需求则需要不使用首页,所以此处得修改为上述。

同理全局搜索跳转到router.push('/')都需要修改

相关推荐
倾颜4 小时前
AI Chat 长会话性能实践:消息虚拟化、动态高度与流式滚动设计
前端·react.js·node.js
幸运小圣4 小时前
SSE 与 WebSocket 新手入门:前端实时通信完全指南【JavaScript】
前端·javascript·websocket
艾伦野鸽ggg4 小时前
25级开学 JS 考核题解
前端·javascript
leoZ2314 小时前
2026-09-08-mysql-57-init-walkthrough
前端·javascript·数据库·vue.js·opencv·mysql·adb
paopaokaka_luck4 小时前
非遗文物数字化系统(AI非遗问答、ONNX图像识别、协同过滤推荐、ECharts数据分析、非遗知识浏览与互动、文创商城订单闭环、文化活动报名签到、社区交流)
前端·javascript·vue.js·人工智能·数据分析·echarts
乘风gg4 小时前
AI Coding 提效 2 倍是真的吗?到底怎么衡量效果
前端·ai编程·claude
用户921080262864 小时前
从对象到原型链:理解 this、构造函数和 new
前端
猫不易4 小时前
Webpack 与 Vite:从 Loader / Plugin 到 Rolldown 统一引擎
前端·vite
YHL5 小时前
🎯 Danci —— 用 AI 驱动开发一个全栈英语单词学习平台
前端·后端
平头哥~5 小时前
Day 20 _ 3D 翻卡_perspective 写错人,卡片就穿帮
前端·3d·css3·学习资料