使用 Laravel 7.x Sanctum (SPA) 与 Vuejs 总是返回 401 Unauthorized
在使用 Laravel 7.x Sanctum (SPA) 与 Vuejs 开发应用程序时，有时会遇到一个常见的问题，即每次请求都返回 401 Unauthorized 错误。这个问题可能会令人困惑，因为我们已经正确配置了 Sanctum，但仍然无法通过身份验证。问题分析经过调查和分析，我们发现这个问题通常是由以下几个原因引起的：1. CSRF 令牌未正确设置：Laravel Sanctum 使用 CSRF 令牌来保护应用程序免受跨站请求伪造的攻击。如果 CSRF 令牌未正确设置，就会导致每次请求都返回 401 Unauthorized 错误。2. 跨域请求未被允许：由于我们的 Vuejs 应用程序通常运行在不同的域名或端口上，因此跨域请求可能会被浏览器阻止。如果跨域请求未被允许，就会导致身份验证失败。3. API 路由未被保护：有时我们可能会忘记在需要身份验证的 API 路由上添加 auth 中间件，导致没有进行身份验证就能够访问这些路由。解决方案针对上述问题，我们可以采取以下解决方案来修复身份验证问题：1. 设置正确的 CSRF 令牌：确保在每个请求的请求头中设置正确的 CSRF 令牌。在 Vuejs 中，可以使用 axios 的拦截器来自动设置 CSRF 令牌。javascriptimport axios from 'axios';axios.interceptors.request.use(config => { config.headers['X-XSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]').getAttribute('content'); return config;});2. 允许跨域请求：在 Laravel 的配置文件中，确保已经正确配置了跨域请求的允许。可以在 `config/cors.php` 文件中添加 Vuejs 应用程序的域名或端口到 `allowed_origins` 数组中。php'allowed_origins' => [ 'http://localhost:8080', // 添加Vuejs应用程序的域名或端口],3. 添加 auth 中间件：确保在需要身份验证的 API 路由上添加 auth 中间件。在 Laravel 的路由文件中，可以使用 `auth:sanctum` 中间件来保护需要进行身份验证的路由。
phpRoute::middleware('auth:sanctum')->group(function () { // 需要进行身份验证的路由});通过设置正确的 CSRF 令牌、允许跨域请求和添加 auth 中间件，我们可以解决使用 Laravel 7.x Sanctum (SPA) 与 Vuejs 开发应用程序时返回 401 Unauthorized 的问题。这些解决方案可以确保我们的应用程序在进行身份验证时能够正常运行，从而提供更好的用户体验和安全性。希望本文对于解决 Laravel Sanctum 和 Vuejs 身份验证问题有所帮助。祝您编写出高效稳定的应用程序！