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

Question

我正在使用 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 还是有其他更好的方法来做到这一点。

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

Answer 1

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

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

您也可以在创建 Axios 实例时全局设置该参数：

import axios from 'axios'

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