javascript - 无法从 localStorage 初始化 Vuex 存储以用于 Nuxt 中的身份验证

Question

我正在使用 Nuxt.js，并且正在尝试进行自己的身份验证。它工作正常，但是当我刷新页面时，状态会返回到初始数据，因此我尝试从 localStorage 初始化 Vuex 存储，如下所示:

导出 const 状态 = () => ({
地位: ''，
token :localStorage.getItem('token') || '',
LoggedInUser: localStorage.getItem('用户') || '',
})
但它给了我这个错误localStorage is not Defined但localStorage.setItem在操作中工作正常

这是完整的代码:

import axios from 'axios'
export const state = () => ({
    status: '',
    token: localStorage.getItem('token') || '',
    loggedInUser: localStorage.getItem('user') || '',
})

export const getters = {
    status (state) {
        return state.status
    },
    authenticated (state) {
        return !!state.token
    },
    token (state) {
        return state.token
    },
    loggedInUser (state) {
        return state.loggedInUser
    },
}

export const mutations = {
    auth_request(state) {
        state.status = 'loading'
    },
    auth_success(state, token) {
        state.status = 'success'
        state.token = token
    },
    auth_error(state) {
        state.status = 'error'
    },
    logout(state) {
        state.status = ''
        state.token = ''
        state.loggedInUser = {}
    },
    auth_success2 (state, loggedInUser) {
        state.loggedInUser = Object.assign({}, loggedInUser)
    }
}

export const actions = {

    login({commit}, data) {
        return new Promise((resolve, reject) => {
            commit('auth_request')
            axios.post('http://127.0.0.1:8000/api/login', data)
                .then((res) => {
                    const loggedInUser = Object.assign({}, res.data.data)
                    const token = res.data.meta.token
                    localStorage.setItem('token', token)
                    localStorage.setItem('user', loggedInUser.name)
                    axios.defaults.headers.common['Authorization'] = 'Bearer '+ token
                    commit('auth_success', token)
                    commit('auth_success2', loggedInUser)
                    this.$router.push('/')
                    resolve(res)
                })
                .catch((error) => {
                    commit('auth_error')
                    console.log(error)
                    reject(error)
                })
        })
    }
}

Answer 1

您没有包含引发此错误的位置，但我假设它在您的服务器日志中。

发生的事情是 Nuxt 正在服务器端初始化自身，开始设置存储，并点击 localStorage 声明。服务器没有本地存储，因此这将失败。

为了解决这个问题，我建议使用带有 .client 后缀的插件，并在客户端初始化期间从 localStorage 获取值:

// the .client suffix is required here to tell nuxt to only run this client side.
// ~/plugins/vuex-init.client.js
export default ({ store }) => {
  const token = localStorage.getItem('token') || ''
  const loggedInUser = localStorage.getItem('user') || ''

  store.commit('setToken', token)
  store.commit('setUser', user)
}

如果您不想自己做这项工作，我已经使用了 this之前并取得了很好的成果。