router.beforeEach的用法简单介绍

最新推荐文章于 2025-02-09 22:42:53 发布

原创最新推荐文章于 2025-02-09 22:42:53 发布 · 1.7w 阅读

6 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

38 篇文章

订阅专栏

本文详细介绍了在Vue项目中如何使用router.beforeEach进行页面跳转前的登录状态检查。通过判断store中的loginInfo.loginState来决定是否允许用户访问需要权限的页面，若未登录则重定向至登录页，并在登录成功后返回原目标页面。

router.beforeEach一般在main.js里面使用:
这里做补充说明下两个参数,
to: 下一个页面/即将要进入的目标
form: 当前页面

//这里是main.js里面
router.beforeEach((to, from, next) => {

  var channel = utils.getUrlParam('channel', from.fullPath) || ''
  if (channel) {
    localStorage.setItem('channel', channel)
  }

  if (wanka.isWanka()) {
    // 万卡app直接跳转
    next()
  } else {
    if (to.meta.requireAuth) {      //判断是否要登录才能打开页面
      if (store.state.loginInfo.loginState) {    //有登录状态,直接跳转
        next()
      } else {
        next({
          path: '/user/login',                //无登录状态,先跳转到登录页面
          query: { redirected: to.fullPath } // 登录成功后跳转回到该路由
        })
      }
    } else {
      next()
    }
  }
})

原文：https://www.jianshu.com/p/d8a2f3ce3132