导航守卫｜路由的钩子函数

Vue-router 导航守卫有哪些？｜路由的钩子函数总结有6个

全局的路由钩子函数：beforeEach、afterEach

单个的路由钩子函数：beforeEnter

组件内的路由钩子函数：beforeRouteEnter、beforeRouteLeave、beforeRouteUpdate

//全局守卫，前置守卫
router.beforeEach(async (to, from, next) => {
  //to：获取要跳转的路由信息
  //from：获取从哪个路由来的信息
  //next：放行函数next();
  //用户登陆了才会有token，未登陆不会有token
  let token = store.state.user.token;
  let name = store.state.user.userInfo.name;
  if (token) {
    //禁止去login页面
    if (to.path == "/login") {
      next("/home");
    } else {
      //让其他组件带上用户信息
      if (name) {
        next();
      } else {
        //如果没有用户信息，先派发action让仓库存储用户信息然后再跳转
        try {
          // 获取用户信息
          await store.dispatch("getUserInfo");
          next();
        } catch (error) {
          //token过期了，获取不到用户信息，需要重新登陆
          await store.dispatch("userLogout");
          next("/login");
        }
      }
    }
  } else {
    // 确保一定要调用next
    next();
  }
});