通过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 然后回车,都是一次新的访问,要重新发请求取一次用户状态的。

0
1
江莲
嗯嗯好的,谢谢老师,明白这点后,路由的逻辑就好理解了
2022-10-22
共1条回复

江莲

提问者

2022-10-21

老师 我又看了下视频,可以不可以这样理解,就是从URL去访问 /create 页面,其实就是重新去访问这个SPA应用,所以store中的user为初始值,isLogin为false

0
0

Vue3 + TS 仿知乎专栏企业级项目

带你完成前后端分离复杂项目,率先掌握 vue3 造轮子技能

3142 学习 · 2313 问题

查看课程