NuxtServerInit 在重新加载后设置 Vuex 身份验证状态答案

【问题标题】：NuxtServerInit sets Vuex auth state after reloadNuxtServerInit 在重新加载后设置 Vuex 身份验证状态
【发布时间】：2019-06-20 04:41:53
【问题描述】：

我正在 Nuxt 项目上设置基本身份验证，其中包含要由 nuxtServerInit 函数解析的 JWT 令牌和 cookie。

使用电子邮件/密码登录时，按预期工作，setUser 突变被触发，适当的user 对象存储在state.auth.user 中。

重新加载时，nuxtServerInit 将从 req.headers.cookies 获取 jwt 令牌，调用 GET 方法并识别 user.Works 就像一个魅力。

当我到达/logout 端点时，问题就开始了。 state.auth.user 设置为 false 并且我有效地注销了...但是如果我刷新，我将使用以前的用户数据再次登录。即使我的 cookie 正确为空（在下面的代码中，user 和 cookie 在注销和刷新后都是 undefined，正如预期的那样）

所以我真的不明白为什么我的state.auth.user 又回到了它的初始值......

store/index.js

import Vuex from "vuex";
import auth from "./modules/auth";
import axios from "~/plugins/axios";

const cookieparser = process.server ? require("cookieparser") : undefined;
const END_POINT = "api/users";


const createStore = () => {
  return new Vuex.Store({
    actions: {
     async nuxtServerInit({ commit, dispatch}, { req }) {
        let cookie = null;
        console.log(req.headers.cookie)
        if (req.headers.cookie) {
          const parsed = cookieparser.parse(req.headers.cookie);
          try {
            cookie = JSON.parse(parsed.auth);
            console.log("cookie", cookie)
            const {accessToken} = cookie
            const config = {
              headers: {
                Authorization: `Bearer ${accessToken}`
              }
            }
            const response = await axios.get(`${END_POINT}/current`, config)

            const user = response.data
            console.log("user nuxt server init", user)
            await commit('setUser', user)
          } catch (err) {
            // No valid cookie found
            console.log(err);
          }
        }
      }
    },
    modules: {
      auth
    }
  });
};

export default createStore;

modules/auth.js


import axios from "~/plugins/axios";
const Cookie = process.client ? require("js-cookie") : undefined;
const END_POINT = "api/users";

export default {
  state: {
    user: null,
    errors: {}
  },
  getters: {
    isAuth: state => !!state.user
  },

  actions: {
    login({ commit }, payload) {
      axios
        .post(`${END_POINT}/login`, payload)
        .then(({ data }) => {
          const { user, accessToken } = data;
          const auth = { accessToken };
          Cookie.set("auth", auth);
          commit("setUser", user);
        })
        .catch(e => {
          const error = e;
          console.log(e);
          commit("setError", error);
        });
    },
    logout({ commit }) {
      axios
        .post(`${END_POINT}/logout`)
        .then(({ data }) => {
          Cookie.remove("auth");
          commit("setUser", false);
        })
        .catch(e => console.log(e));
    },
  },
  mutations: {
    setUser(state, user) {
      state.user = user;
    },
    setError(state, errors) {
      state.errors = errors;
    }
  }
};

【问题讨论】：

找到了if (req.headers.cookie) {...} else { commit('setUser', false) } 的解决方法，但我仍然觉得这种行为很奇怪......
我会说这是因为你在req.headers.cookie 的条件下提交了setUser。该对象肯定存在，因此 serverInit 继续填充用户对象。我认为您需要做的就是检查 auth cookie 是否存在，而不仅仅是任何 cookie。

标签： javascript vuex nuxt.js

【解决方案1】：

我注销用户的方法是创建一个名为 clearToken 的突变并在操作中提交它：

状态：

token: null,

突变：

clearToken(state) {
    state.token = null
  },

行动：

logout(context) {
    context.commit('clearToken')
    Cookie.remove('token')
}

这样，您的令牌状态将恢复为 null。

【讨论】：