六、基于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
})
相关推荐
hi大雄7 分钟前
我的 2025 —— 名为《开始的勇气》🌱
前端·年终总结
从文处安20 分钟前
「前端何去何从」一直写 Vue ,为何要在 AI 时代去学 React?
前端·react.js
aircrushin35 分钟前
OpenClaw“养龙虾”现象的社会技术学分析
前端·后端
明君8799744 分钟前
#Flutter 的官方Skills技能库
前端·flutter
yuki_uix1 小时前
重新认识 React Hooks:从会用到理解设计
前端·react.js
林太白1 小时前
ref和reactive对比终于学会了
前端
Apifox1 小时前
测试数据终于不用到处复制了,Apifox 自动化测试新增「共用测试数据」
前端·后端·测试
小小小小宇1 小时前
Mac龙虾保姆级完整部署指南
前端
睡不着的可乐1 小时前
vue2 和 vue3自定义指令有什么区别,都是怎么实现和使用一个指令
前端·vue.js
闲来没事抠鼻屎1 小时前
Web打印插件实战:轻量化JS打印方案vue-print-designer落地指南
前端