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。如何确保用户通过身份验证后身份验证状态保持为true?

Answer 1

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

持久化存储的一个简单选择是使用vuex-persist。你可以在这里找到入门指南

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的所有地方都是它不应该用于登录凭据和其他安全敏感数据。