六、基于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
})
相关推荐
G***T69120 小时前
React性能优化实战,避免不必要的重渲染
前端·javascript·react.js
q***d17320 小时前
前端微前端部署方案,Nginx与Webpack
前端·nginx·webpack
y***548820 小时前
前端构建工具扩展,Webpack插件开发
前端·webpack·node.js
4***149020 小时前
前端构建工具多页面配置,Webpack与Vite
前端·webpack·node.js
网络点点滴20 小时前
标签的ref属性
前端·javascript·vue.js
天若有情67320 小时前
前端 vs 后端:入行软件行业,我该如何选择?哪个更“简单”?
前端·后端·软件开发·职业·就业·选择
小画家~21 小时前
第二十八:golang Time.time 时间格式返回定义结构体
java·前端·golang
Cobyte21 小时前
17. Vue3 业务组件库按需加载的实现原理
前端·javascript·vue.js
谢尔登21 小时前
原型理解从入门到精通
开发语言·javascript·原型模式
粥里有勺糖21 小时前
视野修炼-技术周刊第127期 | Valdi
前端·javascript·github