首页 > 其他分享 >vue3使用路由守卫出现的问题合集

vue3使用路由守卫出现的问题合集

时间:2024-09-03 16:46:51浏览次数:9  
标签:console log res token store vue3 path 合集 路由

  1. 登录后停留在登录页面无法跳转 --24.9.3
    原代码:
function isRoute (to) {
  let res = router.getRoutes()
  let resFil = res.filter(item => item.path === to.path)
  return resFil.length > 0
}
router.beforeEach((to, from, next) => {
  if (to.path !== '/login' && !store.state.token) {
    next({ name: 'login' })
  } else if (!isRoute(to)) {
    next({ name: '404' })
  } else next()
})

看上去没有逻辑问题, log一下看看:

  console.log('to.path'+to.path);
  console.log("from.path"+from.path);
  console.log('token'+store.state.token);

打印出来发现token为空值, 检查login部分的逻辑代码:

const handleLogin = async () => {
  const res = await proxy.$api.getMenu(loginForm)
  console.log(res)
  store.setMenuList(res.menuList)
  store.token = res.token
  store.dynamicRoute(router)
  router.push('/home')
}

可以发现存储token的代码有问题, 应为: store.state.token = res.token

标签:console,log,res,token,store,vue3,path,合集,路由
From: https://www.cnblogs.com/mandyGuan12/p/18394920

相关文章

  • Vue3+SpringBoot前端项目实战智慧实验室管理平台
    Vue3+SpringBoot前端项目实战:‌智慧实验室管理平台在当今数字化快速发展的时代,‌智慧实验室管理平台成为提升科研效率、‌优化资源配置的重要工具。‌本文将介绍如何使用Vue3和SpringBoot构建一个功能全面的智慧实验室管理平台,‌涵盖平台的设计思路、‌技术选型、‌核心功......
  • 前端Vue3项目VUE3+TypeScript企业级前端Vue项目
    前端Vue3项目VUE3+TypeScript企业级前端Vue项目‌Vue3+SpringBoot前端项目实战:‌智慧实验室管理平台‌在当今数字化快速发展的时代,‌智慧实验室管理平台的建设成为了提升科研效率与管理水平的关键一环。‌本文将通过一个实战案例,‌详细介绍如何使用Vue3和SpringBoot技术栈构建......
  • Vue3源码解析,打造自己的Vue3框架,实现技术深度与思维
    Vue3源码解析与打造自己的Vue3框架:‌技术深度与思维实践引言Vue.js作为当前最流行的前端框架之一,‌其不断迭代和更新推动了前端技术的快速发展。‌Vue3作为Vue.js的下一代主要版本,‌在性能、‌可维护性和开发体验方面进行了重大改进。‌本文将通过对Vue3源码的深入解析,‌探讨......
  • Vue3+Vite+Vant-UI+Pinia+VueUse开发双端业务驱动技术栈商用项目
    前言:个人git仓库,全是干货一、本次搭建项目涉及到vue3、vite、pinia、vue-router、typescript、element-plus,下面先简单介绍一下大家比较陌生的框架或库1、vue3vue团队官宣:2022年2月7日,vue3作为vue的默认版本。现在打开vue官网,界面默认显示的是vue3版本的指导文档。vue团队在......
  • Vite2.0+ElementPlus+Koa2+Mongo全栈开发通用后台系统Vue3
    Vite2.0+ElementPlus+Koa2+Mongo全栈开发通用后台系统Vue3前言当前基于NodeJs框架的全栈工程实践非常之火,作为一个很长时间未接触代码的前程序猿。一直有点手痒痒,想尝试一下这种全新的编程体验,于是就重新开始了填坑的不归之路。这一套框架是基于现在的前后台分离的指导原则来......
  • TS4+Vite+Vitest+Vitepress Vue3.3 自主打造媲美ElementPlus的组件库
    TS4+Vite+Vitest+VitepressVue3.3自主打造媲美ElementPlus的组件库这个问题看起来是想要创建一个类似ElementPlus的Vue组件库,并且使用TypeScript、Vite、Vitest和Vitepress进行开发。以下是一个简化的指南,用于创建一个自己的Vue组件库项目框架。安装必要的工具:npm......
  • 笔记 | Angular 实现 keep-alive (路由复用)
    Angular的路由复用策略(RouteReuseStrategy)是一种用于优化路由跳转性能和提高用户体验的机制。通过实现RouteReuseStrategy接口,后可以自定义路由的复用行为,避免不必要的组件销毁和重建,同时保持组件的状态。以下是对Angular路由复用策略的详细介绍:一、基本概念RouteReuseStrateg......
  • 瓦出现了DirectX Runtime错误怎么办 无畏契约DirectX Runtime报错修复解决方案合集
    如果您在玩《无畏契约》(Valorant)时遇到DirectXRuntime报错,这可能是因为游戏运行时遇到了与DirectX相关的问题。以下是您可以尝试的一些解决方案:1.确保Windows和DirectX都是最新的打开“设置”>“Windows更新”,检查并安装所有可用的更新。这包括最新的Windows......
  • 使用nmcli配置永久静态路由
    一、使用nmcli工具来修改网络配置文件。下面是如何通过nmcli命令行工具为网卡ens192添加多条静态路由的方法:1.确认当前连接ID和UUID首先确保你知道要修改的网卡连接的具体ID和UUID,可以通过以下命令查看:nmcliconnectionshow2.1使用nmcli命令添加IPv4路由。假设你需要为ens192添加......
  • vue3中使用pinia报错
    问题:UncaughtError:[......