六、基于Vue3的开发-【导航守卫】-登录访问拦截器

登录访问拦截器

1、参考文档

javascript 复制代码
	https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

2、具体配置(一般配置在router/index.js中)

javascript 复制代码
const router = createRouter({ ... })

//添加访问拦截器
// ---to: 即将要进入的目标 用一种标准化的方式
// ---from: 当前导航正要离开的路由 
router.beforeEach((to, from) => {
  // ...
  // 返回 false 以取消导航
  return false
})

3、参考配置

javascript 复制代码
//-------------------一般配置在router/index.js中----------------------------------------------
//添加访问拦截器
// -----------to: 即将要进入的目标 用一种标准化的方式
// -----------from: 当前导航正要离开的路由 用一种标准化的方式
router.beforeEach((to) => {
  const userStore = useUserStore()
  //判断有没有token 并且不是登录页
  if (!userStore.token && to.path !== '/login') {
    return '/login'
  }
  // 其它情况就直接放行
  return true
})
相关推荐
晚烛42 分钟前
实战前瞻:构建高可靠、强协同的 Flutter + OpenHarmony 智慧教育平台
javascript·flutter·html
快乐肚皮1 小时前
一文了解XSS攻击:分类、原理与全方位防御方案
java·前端·xss
保护我方头发丶1 小时前
ESP-wifi-蓝牙
前端·javascript·数据库
想学后端的前端工程师2 小时前
【Flutter跨平台开发实战指南:从零到上线-web技术栈】
前端·flutter
老王Bingo2 小时前
Qwen Code + Chrome DevTools MCP,让爬虫、数据采集、自动化测试效率提升 100 倍
前端·爬虫·chrome devtools
董世昌412 小时前
什么是扩展运算符?有什么使用场景?
开发语言·前端·javascript
Yaru112 小时前
Vue 3.6 预览版特性
javascript·vue.js
来杯三花豆奶2 小时前
Vue 3.0 Mixins 详解:从基础到迁移的全面指南
前端·javascript·vue.js
想学后端的前端工程师2 小时前
【React性能优化实战指南:从入门到精通-web技术栈】
前端·react.js·性能优化
白兰地空瓶3 小时前
React Hooks 深度理解:useState / useEffect 如何管理副作用与内存
前端·react.js