Laravel Vue3 - 将令牌和用户信息传递到 Vue 商店答案

【问题标题】：Laravel Vue3 - Passing Token and User info to Vue storeLaravel Vue3 - 将令牌和用户信息传递到 Vue 商店
【发布时间】：2021-10-21 06:19:24
【问题描述】：

我正在创建一个 Laravel/Vue3 应用程序，并希望将 Laravel 路由器与 SPA 路由器完全分开。

为了实现这一点，我创建了一个 dashboard.blade.php 文件，其中包含以下内容：

<x-app-layout>
  <div id="app"></div>
</x-app-layout>

Vue 然后简单地安装在该 div 之上并启动应用程序。

我的webpack.mix.js：

const mix = require("laravel-mix");

mix.ts("resources/js/app.ts", "public/js")
    .vue({ version: 3 })
    .postCss("resources/css/app.css", "public/css", [
        require("postcss-import"),
        require("tailwindcss"),
        require("autoprefixer"),
    ]);

app.ts 文件也很简单：

import { createApp } from 'vue';
import App from './App';
createApp(App).mount('#app');

这很好，但我认为对于后续请求（通过 Axios），我需要用户令牌。如何获取此令牌/登录用户信息到我的 Vue3 应用程序？

我正在使用 Laravel Breeze 进行身份验证（如果有帮助的话）。

谢谢，

【问题讨论】：

标签： laravel vuejs3

【解决方案1】：

事实证明，答案“非常”简单。除了删除这一行的评论标签之外，我什么都不做：

并在您的 axios 配置中添加如下标题：

import axios from "axios";
import store from "../store";

const Axios = axios.create({
    baseURL: process.env.APP_URL,
    headers: { Accept: "application/json" },
});

Axios.interceptors.request.use(
    (config) => {
        store.commit("setLoader", true);
        return config;
    },
    (error) => Promise.reject(error)
);

Axios.interceptors.response.use(
    (response) => {
        store.commit("setLoader", false);
        return response;
    },
    (error) => Promise.reject(error)
);
export default Axios;

随后的 axios 调用会自动附加令牌。

您可以找到所有必需的信息here。喜欢 Laravel...

【讨论】：