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

Posted 2023-03-25

【中文标题】当页面更新时，数据被删除 - vue 和 laravel sanctum

【英文标题】：When the page is updated the data is deleted - vue and laravel sanctum

【发布时间】：2022-01-06 11:17:06

【问题描述】：

我在项目中使用 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')

【问题讨论】：

首先，我建议不要为您的 axios 调用硬编码域/端口。其次，您是否将localhost:8000 添加到SANCTUM_STATEFUL_DOMAINS 域？

是的，我已经添加了，但是没有用

【参考方案1】：

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

【讨论】：

添加 withCredentials 我得到这个：来自其他来源的请求被阻止：同源策略阻止在“http://localhost:8000/api/cost_centers”读取远程资源（原因：如果 CORS 不支持凭证标头'Access-Control-Allow-Credentials'它是'*'）。

【参考方案2】：

我通过将标头添加到 axios 配置来解决它：

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, '')`
  
 )

我从本地存储中获取 accessToken 并且每次重新加载页面时都会刷新信息并且不再出现未经授权