Блог

Главная - Вопросы по программированию - При обновлении страницы данные удаляются — vue и laravel sanctum

При обновлении страницы данные удаляются — vue и laravel sanctum

laravel #vue.js #laravel-sanctum

#laravel #vue.js #laravel-sanctum

Вопрос:

Я использую vue и laravel в проекте, у меня настроено sanctum в laravel, при обновлении страницы данные удаляются, я получаю несанкционированное сообщение. Я попытался установить vuex-persistedstate в проекте, но это не сработало, я также пытался создать перехватчик для чтения токена, который хранится в localStorage, но ничего.

Проблема в том, что когда я снова перезагружаю страницу, запросы, которые она отправляет в API, кажутся потерянными, и вам нужно снова войти в систему, показывает мне не прошедший проверку подлинности

Я использую vuex.

configuration .env:

 SESSION_DOMAIN=localhost
SANCTUM_STATEFUL_DOMAINS=localhost
SESSION_DRIVER=cookie

Конфигурация пути URL-адреса Api:

 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')
}

Комментарии:

1. Во-первых, я бы рекомендовал не жестко кодировать домен / порт для ваших вызовов axios. Во-вторых, вы добавили localhost:8000 в SANCTUM_STATEFUL_DOMAINS домены?

2. да, я уже добавил это, но это не сработало

Ответ №1:

вход в систему sanctum зависит от файлов cookie, а не от локального хранилища, которое вы должны добавить with_credential: true в параметры axios, и хорошо использовать эту библиотеку для аутентификации https://www.npmjs.com/package/vue-sanctum

Комментарии:

1. Добавляя учетные данные, я получаю следующее: запрос от другого источника заблокирован: политика того же источника запрещает чтение удаленного ресурса по адресу ‘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, '')}`
  }
 })
}

Я получаю доступ из локального хранилища, и каждый раз, когда страница перезагружается, информация обновляется и больше не отображается несанкционированно

Метки: