Ruoyi system is a very useful, open source front-end and back-end management system.
Recently, the company has a need to hide the default homepage and jump directly to the first page returned by the routing menu after login.
I found a lot of information, but there is no actual solution.
But it's better to implement this function yourself.
Proceed as follows:
1. First, you should find the project and specify the route to jump to the previous default home page. i.e. '/index'
2. Several places were found in the project, and the page path is as follows:
src/permission.js
src/store/permission.js
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) Where src/permission.js needs to be modified,
After logging in, token status:
1.1) Here to.path=== '/login' judges, after logging in, but you want to jump to the login page. Then the system will jump to the first routing address indexPage of the routing interface, because you are already logged in, the system will not jump to the login page for you unless you click to log out.
1.2) Here to.fullPath == '/' judges that after logging in, when accessing directly through the ip address and port number, it will jump to the first routing page indexPage. Such as: http://10.12.7.76:6090/, so direct access.
1.3) This to.fullPath == '/' judges the else behind to deal with two problems
1.3.1) If you click a menu and then click refresh, you need to stay on the current page.
1.3.2) If a button is clicked on the current page, it will redirect to another page by opening a new window. For example, jump to the real-time monitoring page from the current fault alarm details. (ps: If you don't do this, the page you jump to will become the default first page of the route).
If there is no login and no token:
1.4)
// no token
if (whiteList.indexOf(to.path) !== -1) {
// In the login-free whitelist, enter directly
next()
} else {
next(`/login?redirect=${to.fullPath}`) // otherwise all redirect to the login page.
// But to.fullPath may be %2F, that is, http://172.16.6.205:9090/login?redirect=%2F, without any jump route. At this time, please see the jump method of login.vue below .
NProgress.done()
}
router.beforeEach((to, from, next) => {
NProgress.start()
if (getToken()) {
// 登录之后，访问路由会执行这个方法。
/* has token*/
// 已经登录了，但你想跳到登录页。那系统会跳到路由接口的第一个路由地址，不会给你跳到登录页，除非你点击退出登录。
if (to.path === '/login') {
next({ path: '/' })
NProgress.done()
} 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。如：http://10.12.7.76:6090/，这样直接访问。
let pathIndex = ''
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}`) // 否则全部重定向到登录页。
// 但to.fullPath有可能为%2F，即http://172.16.6.205:9090/login?redirect=%2F，不带任何跳转路由。这时候，请看login.vue的跳转方法。
NProgress.done()
}
}
})2) Where src/store/permission.js needs to be modified
3) src/router/index.js needs to annotate the homepage
4) Where src/utils/request.js needs to be modified
5） src/system/user/profile/resetPwd.vue 和 src/system/user/profile/userInfo.vue
6） src/layout/components/Topbar.vue
3. Make corresponding modifications to login.vue . It's also important here.
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权限生成可访问的路由表
// 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,主要针对直接从http://172.16.6.205:9090/login，登入系统。
// 2、this.redirect == '/'，主要针对直接从这个http://172.16.6.205:9090/login?redirect=%2F，登入系统。因为没有设置重定向的路由
// 如果登录的时候出现1、2两种情况，那么就跳到路由的第一个路由页面，如果登录的时候，有设置可以访问的重定向地址，那么登录后就跳到重定向地址。
if (pathIndex != '') {
this.$router.push({ path: this.redirect == '/' || this.redirect == undefined ? pathIndex : this.redirect }).catch(() => {}) // 跳转重定向页面或跳到默认首页indexPage
}
})
})
.catch(err => {
this.$store.dispatch('LogOut').then(() => {
Message.error(err)
next({ path: '/login' })
})
})
})
.catch(error => {
this.errorMsg = error
this.loading = false
this.getCode()
})
3.1) If there is no token, if you log in on the login page, this login method will be executed first.
this.$store.dispatch('Login', params).then(() => {}）
3.3.1) Access the login page, invoke the Get Routing interface to obtain the routing data, and then determine whether there is a redirected routing address.
a. this.redirect == undefined, mainly for logging in to the system directly from http://172.16.6.205:9090/login.
b. this.redirect == '/', mainly for logging in to the system directly from this http://172.16.6.205:9090/login?redirect=%2F. Because there is no route to redirect
If there are two situations a and b when logging in, then jump to the first routing page of the routing;
If there is a redirection address that can be accessed when logging in, then it will jump to the redirection address after logging in.
if (pathIndex != '') {
this.$router.push({ path: this.redirect == '/' || this.redirect == undefined ? pathIndex : this.redirect }).catch(() => {}) // jump redirection page or jump to the default homepage indexPage
}