当页面更新时，数据被删除 - vue 和 laravel sanctum

Question

我在项目中使用 vue 和 laravel，我在 laravel 中配置了 sanctum，当我更新页面时，数据被删除，我收到一条未经授权的消息。我试图在项目中设置vuex-persistedstate，但它不起作用，我还试图创建一个拦截器来读取存储在localStorage中但没有任何内容的令牌。

问题是当我再次重新加载页面时，它向 api 发出的请求似乎丢失了，您必须重新登录，未验证显示我

我正在使用 vuex。

配置.env:

SESSION_DOMAIN=localhost
SANCTUM_STATEFUL_DOMAINS=localhost
SESSION_DRIVER=cookie

Api url路径配置：

export default {
  state: {
    apiURL: 'http://localhost:8000/api',
    serverPath: 'http://localhost:8000',
  },
  mutations: {},
  actions: {},
}

常规 vuex 设置：

import Vue from 'vue'
import Vuex from 'vuex'

// Modules
import ecommerceStoreModule from '@/views/apps/e-commerce/eCommerceStoreModule'
import app from './app'
import api from './api'
import appConfig from './app-config'
import verticalMenu from './vertical-menu'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    app,
    api,
    appConfig,
    verticalMenu,
    'app-ecommerce': ecommerceStoreModule,
  },
  strict: process.env.DEV,
})

这是登录文件配置的一部分：

if (success) {
      axios.get('http://localhost:8000/api/auth/sanctum/csrf-cookie')
        .then(() => {
          axios.post('http://localhost:8000/api/auth/login', {
            email: this.userEmail,
            password: this.password,
          }).then(resp => {
            const login = resp.data
            const tokenOriginal = login.accessToken
            const token = tokenOriginal.replace(/["']/g, '')

            localStorage.setItem('accessToken', JSON.stringify(token))
            localStorage.setItem('refreshToken', JSON.stringify(token))

            axios.defaults.headers.common.Authorization = `Bearer ${token}`
            axios.defaults.headers.common.Accept = 'application/json'

            axios.get('http://localhost:8000/api/user')

              .then(response => {
                const user = response.data.data
                const { role } = user

                localStorage.setItem('userData', JSON.stringify(user))

                this.$ability.update(user.ability)

axios配置文件：

import axios from 'axios'
import store from '@/store/index'

export function http() {
  return axios.create({
    baseURL: store.state.api.apiURL,
  })
}

export function httpFile() {
  return axios.create({
    baseURL: store.state.api.apiURL,
    headers: {
      'Content-Type': 'multipart/form-data',
    },
  })
}

配置文件路径：

export default {
  state: {
    apiURL: 'http://localhost:8000/api',
    serverPath: 'http://localhost:8000',
  },
  mutations: {},
  actions: {},
}

服务文件：

import { http } from '../http_service'

// Inventory
export function getInventories() {
    return http().get('/store_inventory')
}

Answer 1

sanctum 登录依赖于 cookie 而不是本地存储您必须将 with_credential: true 添加到 axios 选项最好使用这个库进行身份验证 https://www.npmjs.com/package/vue-sanctum

Answer 2

我通过在 axios 配置中添加 headers 解决了这个问题：

import axios from 'axios'
import store from '@/store/index'

export function http() {
 return axios.create({
 baseURL: store.state.api.apiURL,
 headers: {
   'Content-Type': 'application/json',
   'Accept': 'application/json',
   'Authorization': `Bearer 
   ${localStorage.getItem('accessToken').replace(/['"]+/g, '')}`
  }
 })
}

我从localstorage获取了accessToken，每次页面重新加载信息都会刷新，不会再出现unauthorized

当页面更新时，数据被删除 - vue 和 laravel sanctum

When the page is updated the data is deleted - vue and laravel sanctum

laravel

vue.js

laravel-sanctum