Vue / Vuex-更改路线后如何保持用户身份登录

Question

作为一个小型开发团队，我们将创建自己的社交媒体网站只是为了娱乐。

我们的登录过程由存储在localStorage中的jwt处理。

  async login( { commit }, user) {
    commit('auth_request');

    try {
      const res = await axios.post('http://localhost:3000/api/v1/users/login', user);
      if (res.data.status === 'success') {
        const token = res.data.token;
        const user = res.data.user;
        localStorage.setItem('jwt', token);
        commit('auth_success', { token, user }  );
        toast.success(res.data.message);
        router.push({ path: '/' })
      }
      return res;
    } catch (error) {
      commit('set_errors', error.response.data)
      toast.error(error.response.data.message);
    }
  },

一旦我们更改路线，我们就会立即注销。

router.beforeEach((to, from, next) => {
  // check for user is logged in on route change
  next();
})

如何防止由于路由更改或页面重新加载而注销？

Answer 1

好，您提交令牌并将其保存在本地存储中，以便您可以尝试这种方式，以便路由器知道您已通过身份验证

这是一个示例路由器

path: "/dashboard",
name: "dashboard",
meta: { requiresAuth: true },
component: () => import("../views/Dashboard.vue")

我有一个带有requireAuth：true的元，因此您可以转到router.beforeEach并创建一个if语句，以检查是否有令牌，如果有令牌，然后在尝试进入仪表板时保持登录状态（如果没有）页带我进入登录页面。

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth) {
    if (window.localStorage.getItem("jwt")) {
      next();
    } else {
      next({ name: "login" });
    }
  }else{
    next()
  }
});

我们正在做一个if语句，如果我们在window.localStorage.getItem("jwt")中获得令牌，那么如果本地存储中有令牌，那么我们可以告诉路由器保持登录状态并导航到包含meta: { requiresAuth: true }的页面如果我们在本地存储中没有令牌，请带我们登录页面

我希望这对您有所帮助或为您提供如何保护路线的想法。如果您尚未解决问题，则只需对答案进行评论，以便我们解决问题。