Vuex 持久化认证状态

Question

我正在使用 Vuex 和 Laravel sanctum 来验证用户。下面是我的 Vuex auth.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。如何确保如果用户通过身份验证，身份验证状态保持为真？

Answer 1

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

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

Answer 2

假设您要从 API 取回一个令牌，您可以将其存储在本地存储中。

state: {
    authenticated: false,
    user: null,
    token: localStorage.getItem('token') || '',
},
actions:{
    await axios.post('/api/login', credentials).then(response => {
        const token = response.data.token
        localStorage.setItem('token', token)
    })
}

您可以通过 Axios 拦截器处理过期令牌：

created () {
    this.$axios.interceptors.response.use(undefined, function (err) {
        return new Promise(function (resolve, reject) {
        if (err.status === 401) {
          this.$store.dispatch(logout)
        }
        throw err;
      });
    });
}

Vuex 注销操作

logout({commit}){
  return new Promise((resolve, reject) => {
    commit('logout')
    localStorage.removeItem('token')
    delete axios.defaults.headers.common['Authorization']
    resolve()
  })
}

Answer 3

@studio-pj。我认为将令牌存储在 LocalStorage 中是不安全的，因为它是用户凭据。我读到的有关 LocalStorage 的所有内容都是它不应该用于登录凭据和其他安全敏感数据。

Vuex 持久化认证状态

Vuex persist authenticated status

javascript

laravel

vue.js

vuex

laravel-sanctum