Question

我有一个 Vuex 身份验证，用于存储登录用户数据的状态。它在登录期间工作正常，但如果我在登录后重新加载页面，由于某种原因 axios 请求 URI 更改，因此更改有效负载不返回任何数据，它会在重新加载页面后删除 /api 不知道为什么。

Answer 1

您必须保存从服务器发送的令牌才能执行此操作为此，当服务器向您发送令牌时，您必须将其保存在浏览器的 localstorage 中。像 mutations 方法中的这段代码：

login(state, payload) {
    axios({
        headers: {
            'Content-Type': 'application/json'
        },
        method: 'POST',
        url: 'http://127.0.0.1:8000/api/user/login',
        data: payload
    }).then((response) => {
        if (response.data.token) {
            state.user_token = response.data.token;
            localStorage.setItem('user_token', state.user_token)
        }
    }).catch((error) => {
console.log(error)
    });
}

Answer 2

或者您可以使用 npm 包 vuex-persistedstate，其任务是在页面重新加载之间持久化和补充您的 Vuex 状态。

Vuex 状态在页面重新加载时不返回响应

2 个答案: