NuxtServerInit устанавливает состояние аутентификации Vuex после перезагрузки - PullRequest
Новая
       6

NuxtServerInit устанавливает состояние аутентификации Vuex после перезагрузки

0 голосов
/ 26 января 2019

Я устанавливаю базовую аутентификацию для проекта Nuxt с токеном JWT и файлами cookie, которые необходимо проанализировать с помощью функции nuxtServerInit.

При входе по электронной почте / паролю работает как задумано, мутация setUser запускается, и соответствующий user объект сохраняется в state.auth.user.

При перезагрузке nuxtServerInit получит токен jwt от req.headers.cookies, вызовет метод GET и идентифицирует пользователя. Работает как чудо.

Проблема начинается, когда я достигаю конечной точки /logout.state.auth.user имеет значение false, и я фактически вышел из системы ... но если я обновлюсь, я снова войду в систему с предыдущими данными пользователя.Даже если мои куки-файлы должным образом пусты (в приведенном ниже коде оба значения 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;
    }
  }
};
...