若依系统是一个很好用的，开源的前端后台管理系统。
最近公司有一个需求，需要把默认的首页隐藏，登录后直接跳转到路由菜单返回的第一个页面。
查找了不少资料，但是都没有实际的解决方案。
不过最后自己还是实现了这个功能。
步骤如下：
1、首先应当找到项目里面，指定跳转到之前默认首页的路由。即'/index'
2、项目里面找到了几处，页面路径如下：
src/permission.js
src/store/permission.js
src/views/login.vue
src/router/index.js
src/utils/request.js
src/system/user/profile/resetPwd.vue
src/system/user/profile/userInfo.vue
src/layout/components/Topbar.vue
1) src/permission.js 需要修改的地方，
当登录之后，token的情况：
1.1) 这里 to.path=== '/login' 判断，当登录之后，但你想跳到登录页。那系统会跳到路由接口的第一个路由地址indexPage，因为你已经登录了，系统不会给你跳到登录页，除非你点击退出登录。
1.2) 这里 to.fullPath == '/' 判断，当登录之后，直接通过ip地址和端口号访问时，跳转到第一个路由页面indexPage。如：:6090/，这样直接访问。
1.3） 这个 to.fullPath == '/' 判断后面的else，是为了处理两个问题
1.3.1） 如果是点击了一个菜单，然后点击刷新，需要保持在当前的页面。
1.3.2） 如果在当前页面点击一个按钮，通过打开新窗口跳转路由到另一个页面。如从当前故障报警详情里跳到实时监控页面。（ps:如果不这么做，你跳转去的页面会变成路由默认的第一个页面)。
没有登录，没有token的情况：
1.4)
// 没有token
if (whiteList.indexOf(to.path) !== -1) {
// 在免登录白名单，直接进入
next()
} else {
next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页。
// 但to.fullPath有可能为%2F，即:9090/login?redirect=%2F，不带任何跳转路由。这时候，请看下文中 login.vue 的跳转方法。
NProgress.done()
}
1.5）src/pernission.js 完整代码
import router from './router' import store from './store' import { Message } from 'element-ui' import NProgress from 'nprogress' import 'nprogress/nprogress.css' import { getToken } from '@/utils/auth' NProgress.configure({ showSpinner: false }) const whiteList = ['/login', '/auth-redirect', '/bind', '/register'] router.beforeEach((to, from, next) => { // console.log(to, from, getToken(), store.state.permission.indexPage) // debugger NProgress.start() if (getToken()) { // 登录之后，访问路由会执行这个方法。 /* has token*/ // 已经登录了，但你想跳到登录页。那系统会跳到路由接口的第一个路由地址，不会给你跳到登录页，除非你点击退出登录。 if (to.path === '/login') { // next({ path: '/' }) if(store.state.permission.indexPage) { location.href = store.state.permission.indexPage NProgress.done() } else { // 如果在登录界面，点击登录成功，但是还没获取到路由就刷新页面，这时候会出现一直在登录界面刷新的情况。 // 这个时候要重新获取用户信息和路由进行跳转。 store.dispatch('GetInfo').then(res => { // 拉取user_info const roles = res.roles store.dispatch('GenerateRoutes', { roles }).then(accessRoutes => { // 根据roles权限生成可访问的路由表 // 修改默认首页 console.log('路由/permssion', accessRoutes, from, to.fullPath) if(accessRoutes){ // 登录的用户有菜单权限 router.addRoutes(accessRoutes) // 动态添加可访问路由表 if (to.fullPath == '/') { // 当登录之后，直接通过ip地址和端口号访问时，跳转到第一个路由页面indexPage。如：:6090/，这样直接访问。 let pathIndex = '' // 第一个菜单要区分有子菜单和没有子菜单的情况 if(accessRoutes[0].path == '/'){ pathIndex = accessRoutes[0].path + accessRoutes[0].children[0].path } else { // pathIndex = accessRoutes[0].path + '/' + accessRoutes[0].children[0].path // 存在多级子菜单的情况 if(accessRoutes[0].children) { if(accessRoutes[0].children[0].children.length > 0) { // 三级子菜单 pathIndex = accessRoutes[0].path + '/' + accessRoutes[0].children[0].path + '/' + accessRoutes[0].children[0].children[0].path } else { // 二级子菜单 pathIndex = accessRoutes[0].path + '/' + accessRoutes[0].children[0].path } } } // replace: true只是一个设置信息，告诉VUE本次操作后，不能通过浏览器后退按钮，返回前一个路由。 next({ path: pathIndex, replace: true }) // hack方法 确保addRoutes已完成 } else { // 如果是点击了一个菜单，然后刷新，保持在当前的页面。 // 如果是从其他页面点击，通过打开新窗口跳转路由。如从当前故障报警详情里跳到实时监控页面。 next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 // 使用next({ ...to, replace: true })来确保addRoutes()时动态添加的路由已经被完全加载上去。 } // 修改默认首页end } else { // 登录的用户没有任何一个菜单权限 store.dispatch('LogOut').then(() => { next({ path: '/login' }) }) } }) }) .catch(err => { store.dispatch('LogOut').then(() => { Message.error(err) next({ path: '/login' }) }) }) } } else { if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息 store.dispatch('GetInfo').then(res => { // 拉取user_info const roles = res.roles store.dispatch('GenerateRoutes', { roles }).then(accessRoutes => { // 根据roles权限生成可访问的路由表 // 修改默认首页 // console.log(accessRoutes, from, to.fullPath) router.addRoutes(accessRoutes) // 动态添加可访问路由表 if (to.fullPath == '/') { // 当登录之后，直接通过ip地址和端口号访问时，跳转到第一个路由页面indexPage。如：:6090/，这样直接访问。 let pathIndex = '' // 第一个菜单要区分有子菜单和没有子菜单的情况 if(accessRoutes[0].path == '/'){ pathIndex = accessRoutes[0].path + accessRoutes[0].children[0].path } else { // pathIndex = accessRoutes[0].path + '/' + accessRoutes[0].children[0].path // 存在多级子菜单的情况 if(accessRoutes[0].children) { if(accessRoutes[0].children[0].children.length > 0) { // 三级子菜单 pathIndex = accessRoutes[0].path + '/' + accessRoutes[0].children[0].path + '/' + accessRoutes[0].children[0].children[0].path } else { // 二级子菜单 pathIndex = accessRoutes[0].path + '/' + accessRoutes[0].children[0].path } } } // replace: true只是一个设置信息，告诉VUE本次操作后，不能通过浏览器后退按钮，返回前一个路由。 next({ path: pathIndex, replace: true }) // hack方法 确保addRoutes已完成 } else { // 如果是点击了一个菜单，然后刷新，保持在当前的页面。 // 如果是从其他页面点击，通过打开新窗口跳转路由。如从当前故障报警详情里跳到实时监控页面。 next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 // 使用next({ ...to, replace: true })来确保addRoutes()时动态添加的路由已经被完全加载上去。 } // 修改默认首页end }) }) .catch(err => { store.dispatch('LogOut').then(() => { Message.error(err) next({ path: '/login' }) }) }) } else { // 跳转到对应的页面 next() } } } else { // 没有token if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入 next() } else { // next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页。 next(`/login`) // 否则全部重定向到登录页。 // 但to.fullPath有可能为%2F，即:9090/login?redirect=%2F，不带任何跳转路由。这时候，请看login.vue的跳转方法。 NProgress.done() } } }) router.afterEach(() => { NProgress.done() })2） src/store/modules/permission.js 需要修改的地方
import { constantRoutes } from '@/router' import { getRouters } from '@/api/menu' import Layout from '@/layout/index' import ParentView from '@/components/ParentView'; import { Message } from 'element-ui' const permission = { state: { routes: [], addRoutes: [], sidebarRouters: [], // 修改默认首页 indexPage: '' }, mutations: { SET_INDEX_PAGE: (state, indexPage) => { state.indexPage = indexPage }, SET_ROUTES: (state, routes) => { state.addRoutes = routes state.routes = constantRoutes.concat(routes) }, SET_SIDEBAR_ROUTERS: (state, routers) => { state.sidebarRouters = constantRoutes.concat(routers) }, }, actions: { // 生成路由 GenerateRoutes({ commit }) { return new Promise(resolve => { // 向后端请求路由数据 getRouters().then(res => { const sdata = JSON.parse(JSON.stringify(res.data)) const rdata = JSON.parse(JSON.stringify(res.data)) // 修改默认首页。 // 登录后跳转404，要看看登录页url的redirect重定向值是什么。 console.log('路由modules/permission', res.data) if(res.data.length > 0){ // 登录的用户有菜单权限 let pathIndex = '' // 第一个菜单要区分有子菜单和没有子菜单的情况 if (res.data[0].path == '/') { // 一级子菜单 pathIndex = res.data[0].path + res.data[0].children[0].path } else { if (res.data[0].children) { if (res.data[0].children[0].children.length > 0) { // 三级子菜单 pathIndex = res.data[0].path + '/' + res.data[0].children[0].path + '/' + res.data[0].children[0].children[0].path } else { // 二级子菜单 pathIndex = res.data[0].path + '/' + res.data[0].children[0].path } } } // console.log('store permission---', pathIndex) const sidebarRoutes = filterAsyncRouter(sdata) const rewriteRoutes = filterAsyncRouter(rdata, true) // 如果登录之后，用户跳到的路由是存在但没有权限的路由，那就要提示无权限。但是需要有一个接口返回全部路由来作为参考。这个功能后续再考虑是否完善。 rewriteRoutes.push({ path: '*', redirect: '/404', hidden: true }) // 当输入不存在的路由时，直接跳转到404 commit('SET_ROUTES', rewriteRoutes) commit('SET_SIDEBAR_ROUTERS', sidebarRoutes) //修改默认首页 commit('SET_INDEX_PAGE', pathIndex) resolve(rewriteRoutes) } else { // 登录的用户没有任何一个菜单权限 Message({ message: '非常抱歉，该用户没有菜单权限！', type: 'warning' }); resolve() } }) }) } } } // 遍历后台传来的路由字符串，转换为组件对象 function filterAsyncRouter(asyncRouterMap, isRewrite = false) { return asyncRouterMap.filter(route => { if (isRewrite && route.children) { route.children = filterChildren(route.children) } if (route.component) { // Layout ParentView 组件特殊处理 if (route.component === 'Layout') { route.component = Layout } else if (route.component === 'ParentView') { route.component = ParentView } else { route.component = loadView(route.component) } } if (route.children != null && route.children && route.children.length) { route.children = filterAsyncRouter(route.children, isRewrite) } return true }) } function filterChildren(childrenMap) { var children = [] childrenMap.forEach((el, index) => { if (el.children && el.children.length) { if (el.component === 'ParentView') { el.children.forEach(c => { c.path = el.path + '/' + c.path if (c.children && c.children.length) { children = children.concat(filterChildren(c.children)) return } children.push(c) }) return } } children = children.concat(el) }) return children } export const loadView = (view) => { // 路由懒加载 return (resolve) => require([`@/views/${view}`], resolve) } export default permission3） src/router/index.js 需要把首页注释
4） src/utils/request.js 需要修改的地方
5） src/system/user/profile/resetPwd.vue 和 src/system/user/profile/userInfo.vue
6） src/layout/components/Topbar.vue
7）针对 login.vue 做出相应的修改。这里也很重要。
this.$store.dispatch('Login', params).then(() => { // 1、跳到登录后指定跳转的页面或者登录后跳到首页 // this.$router.push({ path: this.redirect || '/' }).catch(() => {}) // 2、登录后跳到路由默认的第一个路由页面 this.$store.dispatch('GetInfo').then(res => { // 拉取完user_info信息 const roles = res.roles this.$store.dispatch('GenerateRoutes', { roles }).then(accessRoutes => { // 根据roles权限生成可访问的路由表 if(accessRoutes) { // 登录用户有菜单权限。 // console.log(accessRoutes, from, to.fullPath) this.$router.addRoutes(accessRoutes) // 动态添加可访问路由表 let pathIndex = '' pathIndex = accessRoutes[0].path + '/' + accessRoutes[0].children[0].path // 设置默认首页地址indexPage // console.log(this.redirect, pathIndex) // 1、this.redirect == undefined,主要针对直接从:9090/login，登入系统。 // 2、this.redirect == '/'，主要针对直接从这个:9090/login?redirect=%2F，登入系统。因为没有设置重定向的路由 // 如果登录的时候出现1、2两种情况，那么就跳到路由的第一个路由页面，如果登录的时候，有设置可以访问的重定向地址，那么登录后就跳到重定向地址。 if (pathIndex != '') { this.$router.push({ path: this.redirect == '/' || this.redirect == undefined ? pathIndex : this.redirect }).catch(() => {}) // 跳转重定向页面或跳到默认首页indexPage } } else { // 登录的用户没有任何一个菜单路由权限，那么要去掉登录按钮的loading状态。从新获取验证码。 this.loading = false this.getCode() } }) }) .catch(err => { this.$store.dispatch('LogOut').then(() => { Message.error(err) next({ path: '/login' }) }) }) }) .catch(error => { this.errorMsg = error this.loading = false this.getCode() })7.1）没有token，在登录页面登录，会先执行这个登录方法。
this.$store.dispatch('Login', params).then(() => {}）
7.7.1）访问登录页面，调起获取路由接口获取到路由数据后，然后判断是否有设置重定向的路由地址。
a、this.redirect == undefined,主要针对直接从:9090/login，登入系统。
b、this.redirect == '/'，主要针对直接从这个:9090/login?redirect=%2F，登入系统。因为没有设置重定向的路由
如果登录的时候，出现a、b两种情况，那么就跳到路由的第一个路由页面;
如果登录的时候，有设置可以访问的重定向地址，那么登录后就跳到重定向地址。
if (pathIndex != '') {
this.$router.push({ path: this.redirect == '/' || this.redirect == undefined ? pathIndex : this.redirect }).catch(() => {}) // 跳转重定向页面或跳到默认首页indexPage
}
2024年4月2日补充：
当用户登录之后，点击浏览器做上角的后退按钮
