El sistema Ruoyi es un sistema de gestión de front-end y back-end de código abierto muy útil.
Recientemente, la empresa tuvo la necesidad de ocultar la página de inicio predeterminada y saltar directamente a la primera página que muestra el menú de enrutamiento después de iniciar sesión.
Encontré mucha información, pero no hay una solución real.
Pero es mejor implementar esta función usted mismo.
Proceder de la siguiente:
1. Primero, debe encontrar el proyecto y especificar la ruta para saltar a la página de inicio predeterminada anterior. es decir, '/índice'
2. Se encontraron varios lugares en el proyecto y la ruta de la página es la siguiente:
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/ diseño/componentes/Topbar.vue
1) Donde es necesario modificar src/permission.js ,
Después de iniciar sesión, estado del token:
1.1) Aquí se juzga to.path=== '/login' , después de iniciar sesión, pero desea saltar a la página de inicio de sesión. Luego, el sistema saltará a la primera página de índice de la dirección de enrutamiento de la interfaz de enrutamiento. Debido a que ya inició sesión, el sistema no saltará a la página de inicio de sesión a menos que haga clic para cerrar sesión.
1.2) Aquí to.fullPath == '/' juzga que después de iniciar sesión, al acceder directamente a través de la dirección IP y el número de puerto, saltará a la primera página de enrutamiento indexPage. Como: http://10.12.7.76:6090/, acceso directo.
1.3) Este to.fullPath == '/' juzga el resto detrás para resolver dos problemas
1.3.1) Si hace clic en un menú y luego hace clic en actualizar, debe permanecer en la página actual.
1.3.2) Si se hace clic en un botón en la página actual, se redirigirá a otra página abriendo una nueva ventana. Por ejemplo, salte a la página de monitoreo en tiempo real desde los detalles de la alarma de falla actual. (PD: si no hace esto, la página a la que salte se convertirá en la primera página predeterminada de la ruta).
Si no hay inicio de sesión ni token:
1.4)
// sin token
if (whiteList.indexOf(hacia.ruta) !== -1) {
// En la lista blanca sin inicio de sesión, ingrese directamente
próximo()
} demás {
next(`/login?redirect=${to.fullPath}`) // de lo contrario, todos redirigen a la página de inicio de sesión.
// Pero to.fullPath puede ser %2F, es decir, http://172.16.6.205:9090/login?redirect=%2F, sin ninguna ruta de salto. En este momento, consulte el método de salto de login.vue a continuación .
NProgress.hecho()
}
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) Dónde es necesario modificar src/store/permission.js
3) src/router/index.js necesita anotar la página de inicio
4) Dónde es necesario modificar src/utils/request.js
5）src/system/user/profile/resetPwd.vue y src/system/user/profile/userInfo.vue
6）src/layout/components/Topbar.vue
3. Realice las modificaciones correspondientes en login.vue . También es importante aquí.
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) Si no hay ningún token, si inicia sesión en la página de inicio de sesión, este método de inicio de sesión se ejecutará primero.
this.$store.dispatch( 'Iniciar sesión ', params).luego(() => {}）
3.3.1) Acceda a la página de inicio de sesión, invoque la interfaz Obtener enrutamiento para obtener los datos de enrutamiento y luego determine si hay una dirección de enrutamiento redirigida.
a.this.redirect == indefinido, principalmente para iniciar sesión en el sistema directamente desde http://172.16.6.205:9090/login.
b. this.redirect == '/', principalmente para iniciar sesión en el sistema directamente desde este http://172.16.6.205:9090/login?redirect=%2F. Porque no hay ruta para redirigir
Si hay dos situaciones a y b al iniciar sesión, salte a la primera página de enrutamiento del enrutamiento;
Si hay una dirección de redirección a la que se puede acceder al iniciar sesión, saltará a la dirección de redirección después de iniciar sesión.
si (índice de ruta! = '') {
this.$router.push({ ruta: this.redirect == '/' || this.redirect == undefinido ? pathIndex : this.redirect }).catch(() => {}) // saltar a la página de redirección o saltar a la página de inicio predeterminada indexPage
}