通过URL跳转失败
来源:9-6 改进路由验证系统
江莲
2022-10-21
老师您好,我这边遇到这个样一个问题
首先我在router.ts中加了几个注释,用来查看每次路由守卫工作时,从store取出的值,如下
// 添加前置路由守卫
router.beforeEach((to, from, next) => {
const { user } = store.state
console.log('路由中的user', user)
console.log('路由中的user.isLogin', user.isLogin)
// 在用户未登录的情况下去需要登录的页面(元数据)
if (to.meta.requiredLogin && !store.state.user.isLogin) {
next({ name: 'login' })
} else if (to.meta.redirectAlreadyLogin && store.state.user.isLogin) {
// 在用户已登录的情况下去访问登录的页面
next({ name: 'home' })
} else {
next() // 官网就这样直接调用next()方法表示放行
}
})
在正常登录之后,通过点击「新建文章」按钮可以通过路由跳转到对应的页面
通过控制台发现输出的user值也没问题
但是如果从首页通过修改url的方式则不能跳转到新建文章页面,而是会被路由守卫发送到登录页面,原因是在路由守卫中不能正确获得state
我很疑惑为什么通过修改URL的方式,store就不能正常工作,我的router代码如下
import { createRouter, createWebHistory, useRoute } from 'vue-router'
import MyHome from './views/MyHome.vue'
import MyLogin from './views/MyLogin.vue'
import ColumnDetail from './views/ColumnDetail.vue'
import CreatePost from './views/CreatePost.vue'
import MySingup from './views/MySignup.vue'
import store from './store'
const routerHistory = createWebHistory()
const router = createRouter({
history: routerHistory,
routes: [
{
path: '/',
name: 'home',
component: MyHome
},
{
path: '/login',
name: 'login',
component: MyLogin,
meta: {
redirectAlreadyLogin: true // 登录了的用户不能再访问
}
},
{
path: '/column/:id',
name: 'column',
component: ColumnDetail
},
{
path: '/create',
name: 'create',
component: CreatePost,
meta: {
requiredLogin: true // 用于登陆了的用户才能访问
}
},
{
path: '/singup',
name: 'singup',
component: MySingup,
meta: {
redirectAlreadyLogin: true // 登录了的用户不能再访问
}
}
]
})
// 添加前置路由守卫
router.beforeEach((to, from, next) => {
const { user } = store.state
console.log('路由中的user', user)
console.log('路由中的user.isLogin', user.isLogin)
// 在用户未登录的情况下去需要登录的页面(元数据)
if (to.meta.requiredLogin && !store.state.user.isLogin) {
next({ name: 'login' })
} else if (to.meta.redirectAlreadyLogin && store.state.user.isLogin) {
// 在用户已登录的情况下去访问登录的页面
next({ name: 'home' })
} else {
next() // 官网就这样直接调用next()方法表示放行
}
})
export default router
写回答
2回答
-
张轩
2022-10-22
同学你好
你下面想的是正确的,单独换 url 然后回车,都是一次新的访问,要重新发请求取一次用户状态的。
012022-10-22 -
江莲
提问者
2022-10-21
老师 我又看了下视频,可以不可以这样理解,就是从URL去访问 /create 页面,其实就是重新去访问这个SPA应用,所以store中的user为初始值,isLogin为false
00
相似问题