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('/')都需要修改

相关推荐
thatway198932 分钟前
闲聊-关于AI终结者的警醒
前端
努力的小郑39 分钟前
突发!Claude Code 51万行源码全网裸奔:一场史诗级“开源”事故,国内大厂笑麻了
前端·后端·ai编程
七度黑光1 小时前
用 openclaw 给故障复盘打分:质量审核自动化实践
运维·服务器·前端·数据库·自动化
HashTang1 小时前
Claude Code 源码中 REPL.tsx 深度解析:一个 5005 行 React 组件的架构启示
前端·后端·ai编程
wendycwb2 小时前
前端城市地址根据最后一级倒推,获取各层级id的方法
前端·vue.js·typescript
终端鹿2 小时前
Vue3 模板引用 (ref):操作 DOM 与子组件实例 从入门到精通
前端·javascript·vue.js
千寻girling2 小时前
不知道 Java 全栈 + AI 编程有没有搞头 ?
前端·人工智能·后端
小码哥_常3 小时前
Android开发:精准捕获应用的前后台行踪
前端
蜡台3 小时前
Vue 打包优化
前端·javascript·vue.js·vite·vue-cli
木斯佳3 小时前
前端八股文面经大全:快手前端一面 (2026-03-29)·面经深度解析
前端·宏任务·原型链·闭包