从 Laravel Vue.js 或 React.js MPA 调用受保护的 API 路由答案

【问题标题】：Calling Protected API Routes from Laravel Vue.js or React.js MPA从 Laravel Vue.js 或 React.js MPA 调用受保护的 API 路由
【发布时间】：2021-09-18 07:23:44
【问题描述】：

我正在使用 Laravel 默认身份验证构建一个 Laravel Vue MPA 项目，其中大部分页面由 Laravel 提供服务。但是对于表单提交，我使用的是 Vue 组件，并且表单直接提交到 API 路由。我的每个页面都包含几个 vue 组件。下面给出一个例子

@extends('layouts.app')

@section('content')

    <div class="container">
        <div class="row">
            <div class="col-md-6 mx-auto">
                    <profile-component>
                    </profile-component>
            </div>
        </div>
    </div>
@endsection

我面临的问题是访问受保护的 API 路由。对于 API 身份验证，我使用了 Laravel Passport。在上面的示例中，如果我尝试更新配置文件，我也必须发送 Passport Token。我读了很多文章说不要在 localStorage 中存储身份验证令牌，这就是我尝试使用 Laravel Secure Cookie 的原因。但问题是我无法从 vuejs 访问安全 cookie，那么如何在 vuejs API 调用中发送我的令牌。

我也尝试将其存储到数据库用户表中并尝试通过道具传递令牌，但感觉将其作为道具传递并不安全。

现在我不明白该怎么做。我应该使用 localStorage 还是有其他更好的方法。

如果有人可以提供帮助，请提前致谢。

【问题讨论】：

标签： javascript reactjs laravel vue.js vuejs2

【解决方案1】：

我建议你使用像 Axios 这样的库来从 Vuejs 发出 API 请求。有了它，您可以在请求中包含 withCredentials 选项，这将自动使用您的 API 令牌：

axios.get('some api url', {withCredentials: true});

也可以在创建axios实例的时候全局设置参数：

import axios from 'axios'

const instance = axios.create({
  withCredentials: true
})

【讨论】：

这是要在授权标头中添加令牌还是作为cookie？