javascript - Vuex 持久化认证状态

Question

我正在使用 Vuex 和 Laravel sanctum 对用户进行身份验证。以下是我的 Vuexauth.js

import axios from 'axios'

export default {

    namespaced: true,

    state:{
        authenticated: false,
        user: null
    },

    getters:{
        authenticated (state) {
            return state.authenticated
        },

         user (state) {
            return state.user
        }
    },

    mutations:{
        SET_AUTHENTICATED(state, value){
            state.authenticated = value
        },

        SET_USER(state, data){
            state.user = data
        }
     },

    actions:{
        async login ({commit}, credentials){
         await axios.get('/sanctum/csrf-cookie')
          await axios.post('/api/login', credentials).then(response => {
                commit('SET_AUTHENTICATED', true)
                commit('SET_USER', response.data)
            }).catch(() => {
                commit('SET_AUTHENTICATED', false)
                commit('SET_USER', null)
            })

        },


    }

}

身份验证正在工作，但每次我刷新页面时，身份验证状态都默认为 false。我如何确保如果用户通过身份验证，身份验证状态保持为真？

标签： javascriptlaravelvue.jsvuexlaravel-sanctum

Answer 1

持久化数据有两种可能的选择：您可以使用 cookie 或本地存储。这两个选项都经常使用，例如Nuxt Auth。

持久存储商店的一个简单选择是使用vuex-persist. 您可以在此处找到入门指南。