设置基于Laranuxt - Laravel 7 和 Nuxt 的组合。使用 PHP 7.4.8 在 Windows 上运行
我一直在尝试通过 Laravel 7 和 Sanctum 身份验证器模块对 nuxt 应用程序上的用户进行身份验证。我现在得到一个似乎没问题的回应？
Request URL: http://localhost:8000/login
Request Method: POST
Status Code: 204 No Content
接下来我尝试获取用户数据，但是我不能，因为我没有授权；
Request URL: http://localhost:8000/api/user
Request Method: GET
Status Code: 401 Unauthorized
但是，如果我在 Nuxt 中登录后转到 laravel 前端，我已经登录：
Request URL: http://localhost:8000/home
Request Method: GET
Status Code: 200 OK
试图打开http://localhost:8000/api/user让我进入一个不断循环的 api/user 和登录之间的重定向以结尾ERR_TOO_MANY_REDIRECTS
nuxt.config.js：
export default {
/*
** Nuxt rendering mode
** See https://nuxtjs.org/api/configuration-mode
*/
mode: 'universal',
server: {
port: process.env.PORT,
host: process.env.HOST,
serverUrl: process.env.API_URL
},
env: {
serverUrl: process.env.API_URL
},
/*
** Headers of the page
** See https://nuxtjs.org/api/configuration-head
*/
head: {
title: process.env.npm_package_name || '',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{ rel: 'stylesheet', href: '/mdi.css' },
],
},
/*
** Customize the progress-bar color
*/
loading: { color: '#fff' },
/*
** Global CSS
*/
css: [],
/*
** Plugins to load before mounting the App
*/
plugins: [],
/*
** Nuxt.js dev-modules
*/
buildModules: [
// Doc: https://github.com/nuxt/components
'@nuxt/components',
// Doc: https://github.com/nuxt-community/eslint-module
'@nuxtjs/eslint-module',
// Doc: https://github.com/nuxt-community/nuxt-tailwindcss
'@nuxtjs/tailwindcss',
],
tailwindcss: {
configPath: '~/config/tailwind.config.js',
cssPath: '~/assets/css/tailwind.css',
exposeConfig: false
},
/*
** Nuxt.js modules
*/
modules: [
'@nuxtjs/axios',
'@nuxtjs/auth-next',
'@nuxtjs/pwa',
'@nuxtjs/dotenv',
],
/*
** components module configuration
** See https://github.com/nuxt/components
*/
components: true,
/*
** Axios module configuration
** See https://axios.nuxtjs.org/options
*/
axios: {
baseUrl: process.env.API_URL,
credentials: true,
baseURL: process.env.API_URL,
headers: {
accept: 'application/json',
},
},
auth: {
strategies: {
cookie: {
cookie: {
name: 'XSRF-TOKEN',
}
},
'laravelSanctum': {
provider: 'laravel/sanctum',
url: process.env.API_URL
},
},
redirect: {
login: '/login',
logout: '/login',
callback: '/login',
home: '/'
}
},
router: {
middleware: ['auth']
},
/*
** Build configuration
** See https://nuxtjs.org/api/configuration-build/
*/
build: {},
}
.env
APP_URL=http://localhost
API_URL=http://localhost:8000
AUTH_URL=http://localhost:3000/auth
DB_CONNECTION=mysql
BROADCAST_DRIVER=log
CACHE_DRIVER=file
QUEUE_CONNECTION=sync
SESSION_DRIVER=file
SESSION_LIFETIME=120
SANCTUM_STATEFUL_DOMAINS=127.0.0.1:8000,127.0.0.1:3000
配置\sanctum.php
<?php
return [
/*
|--------------------------------------------------------------------------
| Stateful Domains
|--------------------------------------------------------------------------
|
| Requests from the following domains / hosts will receive stateful API
| authentication cookies. Typically, these should include your local
| and production domains which access your API via a frontend SPA.
|
*/
'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', implode(',', [
'localhost',
'localhost:8000',
'localhost:3000',
'127.0.0.1',
]))),
/*
|--------------------------------------------------------------------------
| Expiration Minutes
|--------------------------------------------------------------------------
|
| This value controls the number of minutes until an issued token will be
| considered expired. If this value is null, personal access tokens do
| not expire. This won't tweak the lifetime of first-party sessions.
|
*/
'expiration' => null,
/*
|--------------------------------------------------------------------------
| Sanctum Middleware
|--------------------------------------------------------------------------
|
| When authenticating your first-party SPA with Sanctum you may need to
| customize some of the middleware Sanctum uses while processing the
| request. You may change the middleware listed below as required.
|
*/
'middleware' => [
'verify_csrf_token' => App\Http\Middleware\VerifyCsrfToken::class,
'encrypt_cookies' => App\Http\Middleware\EncryptCookies::class,
],
];
配置\app.php
<?php
return [
/*
|--------------------------------------------------------------------------
| Application Name
|--------------------------------------------------------------------------
|
| This value is the name of your application. This value is used when the
| framework needs to place the application's name in a notification or
| any other location as required by the application or its packages.
|
*/
'name' => env('APP_NAME', 'Laravel'),
/*
|--------------------------------------------------------------------------
| Application Environment
|--------------------------------------------------------------------------
|
| This value determines the "environment" your application is currently
| running in. This may determine how you prefer to configure various
| services the application utilizes. Set this in your ".env" file.
|
*/
'env' => env('APP_ENV', 'production'),
/*
|--------------------------------------------------------------------------
| Application Debug Mode
|--------------------------------------------------------------------------
|
| When your application is in debug mode, detailed error messages with
| stack traces will be shown on every error that occurs within your
| application. If disabled, a simple generic error page is shown.
|
*/
'debug' => (bool) env('APP_DEBUG', false),
/*
|--------------------------------------------------------------------------
| Application URL
|--------------------------------------------------------------------------
|
| This URL is used by the console to properly generate URLs when using
| the Artisan command line tool. You should set this to the root of
| your application so that it is used when running Artisan tasks.
|
*/
'url' => env('API_URL', 'http://localhost'),
'asset_url' => env('ASSET_URL', null),
/*
|--------------------------------------------------------------------------
| Application Timezone
|--------------------------------------------------------------------------
|
| Here you may specify the default timezone for your application, which
| will be used by the PHP date and date-time functions. We have gone
| ahead and set this to a sensible default for you out of the box.
|
*/
'timezone' => 'UTC',
/*
|--------------------------------------------------------------------------
| Application Locale Configuration
|--------------------------------------------------------------------------
|
| The application locale determines the default locale that will be used
| by the translation service provider. You are free to set this value
| to any of the locales which will be supported by the application.
|
*/
'locale' => 'en',
/*
|--------------------------------------------------------------------------
| Application Fallback Locale
|--------------------------------------------------------------------------
|
| The fallback locale determines the locale to use when the current one
| is not available. You may change the value to correspond to any of
| the language folders that are provided through your application.
|
*/
'fallback_locale' => 'en',
/*
|--------------------------------------------------------------------------
| Faker Locale
|--------------------------------------------------------------------------
|
| This locale will be used by the Faker PHP library when generating fake
| data for your database seeds. For example, this will be used to get
| localized telephone numbers, street address information and more.
|
*/
'faker_locale' => 'en_US',
/*
|--------------------------------------------------------------------------
| Encryption Key
|--------------------------------------------------------------------------
|
| This key is used by the Illuminate encrypter service and should be set
| to a random, 32 character string, otherwise these encrypted strings
| will not be safe. Please do this before deploying an application!
|
*/
'key' => env('APP_KEY'),
'cipher' => 'AES-256-CBC',
/*
|--------------------------------------------------------------------------
| Autoloaded Service Providers
|--------------------------------------------------------------------------
|
| The service providers listed here will be automatically loaded on the
| request to your application. Feel free to add your own services to
| this array to grant expanded functionality to your applications.
|
*/
'providers' => [
/*
* Laravel Framework Service Providers...
*/
Illuminate\Auth\AuthServiceProvider::class,
Illuminate\Broadcasting\BroadcastServiceProvider::class,
Illuminate\Bus\BusServiceProvider::class,
Illuminate\Cache\CacheServiceProvider::class,
Illuminate\Foundation\Providers\ConsoleSupportServiceProvider::class,
Illuminate\Cookie\CookieServiceProvider::class,
Illuminate\Database\DatabaseServiceProvider::class,
Illuminate\Encryption\EncryptionServiceProvider::class,
Illuminate\Filesystem\FilesystemServiceProvider::class,
Illuminate\Foundation\Providers\FoundationServiceProvider::class,
Illuminate\Hashing\HashServiceProvider::class,
Illuminate\Mail\MailServiceProvider::class,
Illuminate\Notifications\NotificationServiceProvider::class,
Illuminate\Pagination\PaginationServiceProvider::class,
Illuminate\Pipeline\PipelineServiceProvider::class,
Illuminate\Queue\QueueServiceProvider::class,
Illuminate\Redis\RedisServiceProvider::class,
Illuminate\Auth\Passwords\PasswordResetServiceProvider::class,
Illuminate\Session\SessionServiceProvider::class,
Illuminate\Translation\TranslationServiceProvider::class,
Illuminate\Validation\ValidationServiceProvider::class,
Illuminate\View\ViewServiceProvider::class,
/*
* Package Service Providers...
*/
/*
* Application Service Providers...
*/
App\Providers\AppServiceProvider::class,
App\Providers\AuthServiceProvider::class,
// App\Providers\BroadcastServiceProvider::class,
App\Providers\EventServiceProvider::class,
App\Providers\RouteServiceProvider::class,
],
/*
|--------------------------------------------------------------------------
| Class Aliases
|--------------------------------------------------------------------------
|
| This array of class aliases will be registered when this application
| is started. However, feel free to register as many as you wish as
| the aliases are "lazy" loaded so they don't hinder performance.
|
*/
'aliases' => [
'App' => Illuminate\Support\Facades\App::class,
'Arr' => Illuminate\Support\Arr::class,
'Artisan' => Illuminate\Support\Facades\Artisan::class,
'Auth' => Illuminate\Support\Facades\Auth::class,
'Blade' => Illuminate\Support\Facades\Blade::class,
'Broadcast' => Illuminate\Support\Facades\Broadcast::class,
'Bus' => Illuminate\Support\Facades\Bus::class,
'Cache' => Illuminate\Support\Facades\Cache::class,
'Config' => Illuminate\Support\Facades\Config::class,
'Cookie' => Illuminate\Support\Facades\Cookie::class,
'Crypt' => Illuminate\Support\Facades\Crypt::class,
'DB' => Illuminate\Support\Facades\DB::class,
'Eloquent' => Illuminate\Database\Eloquent\Model::class,
'Event' => Illuminate\Support\Facades\Event::class,
'File' => Illuminate\Support\Facades\File::class,
'Gate' => Illuminate\Support\Facades\Gate::class,
'Hash' => Illuminate\Support\Facades\Hash::class,
'Http' => Illuminate\Support\Facades\Http::class,
'Lang' => Illuminate\Support\Facades\Lang::class,
'Log' => Illuminate\Support\Facades\Log::class,
'Mail' => Illuminate\Support\Facades\Mail::class,
'Notification' => Illuminate\Support\Facades\Notification::class,
'Password' => Illuminate\Support\Facades\Password::class,
'Queue' => Illuminate\Support\Facades\Queue::class,
'Redirect' => Illuminate\Support\Facades\Redirect::class,
'Redis' => Illuminate\Support\Facades\Redis::class,
'Request' => Illuminate\Support\Facades\Request::class,
'Response' => Illuminate\Support\Facades\Response::class,
'Route' => Illuminate\Support\Facades\Route::class,
'Schema' => Illuminate\Support\Facades\Schema::class,
'Session' => Illuminate\Support\Facades\Session::class,
'Storage' => Illuminate\Support\Facades\Storage::class,
'Str' => Illuminate\Support\Str::class,
'URL' => Illuminate\Support\Facades\URL::class,
'Validator' => Illuminate\Support\Facades\Validator::class,
'View' => Illuminate\Support\Facades\View::class,
],
];
关于如何通过 Laravel API 在 Nuxt 上接收需要 autentication 的内容的任何想法或提示？也许需要代理？
编辑; 检查 laravel 中的调试结果，laravel_session cookie 和 XSRF-TOKEN 从第一次登录 Nuxt 到 Laravel 的“set-cookie”响应一直匹配。执行 /api/user 时也会匹配相同的 cookie。
来自 http://localhost:3000/auth/sanctum/csrf-cookie 的响应
set-cookie: XSRF-TOKEN=eyJpdiI6IkE0NGpHZjdXMG42N1dJUnBtb0t3U2c9PSIsInZhbHVlIjoieEdwWjVTMWovNTN2OFo2SFFRSjlCY1BzbW94clFJaXpFTEtXdE13THRjU0xkMTFlVDZDT21pOVJ0UG5qTXdBbSIsIm1hYyI6IjBlM2YzNDU0ZWU0ZTQ1YjhkOTZiOWQ4YWNlNDc1OTMzNTY0OWQ2M2U4NzZlMzFkM2YzNDI3YmVmOGNkMWYzOWMifQ%3D%3D; expires=Sun, 12-Jul-2020 22:13:32 GMT; Max-Age=7200; path=/; samesite=lax
set-cookie: laravel_session=eyJpdiI6ImNHR0MxdTRJMkYyenhVVmVlbnQ5eFE9PSIsInZhbHVlIjoiZWQzcEdYNXdnbUd5a3pLYTVPaGNLNG9Udnk5bGpGTTluRm01V0pzY2p1WU9pSWJkbEpmME1BREdFRDRoY3hybiIsIm1hYyI6IjJmM2FjMDU0MDIwMjk4NmMxZjNkYzIwMGFiYjhmYWM3MWFkOGI0MDRlYmZiN2YzNzIzMTQ1NzlhYTQ3ZTMzOTEifQ%3D%3D; expires=Sun, 12-Jul-2020 22:13:32 GMT; Max-Age=7200; path=/; httponly; samesite=lax
然后触发 http://localhost:3000/auth/login （返回状态码 204）请求：
Cookie: auth.strategy=laravelSanctum; auth._token.laravelSanctum=false; auth._token_expiration.laravelSanctum=false; XSRF-TOKEN=eyJpdiI6IkE0NGpHZjdXMG42N1dJUnBtb0t3U2c9PSIsInZhbHVlIjoieEdwWjVTMWovNTN2OFo2SFFRSjlCY1BzbW94clFJaXpFTEtXdE13THRjU0xkMTFlVDZDT21pOVJ0UG5qTXdBbSIsIm1hYyI6IjBlM2YzNDU0ZWU0ZTQ1YjhkOTZiOWQ4YWNlNDc1OTMzNTY0OWQ2M2U4NzZlMzFkM2YzNDI3YmVmOGNkMWYzOWMifQ%3D%3D; laravel_session=eyJpdiI6ImNHR0MxdTRJMkYyenhVVmVlbnQ5eFE9PSIsInZhbHVlIjoiZWQzcEdYNXdnbUd5a3pLYTVPaGNLNG9Udnk5bGpGTTluRm01V0pzY2p1WU9pSWJkbEpmME1BREdFRDRoY3hybiIsIm1hYyI6IjJmM2FjMDU0MDIwMjk4NmMxZjNkYzIwMGFiYjhmYWM3MWFkOGI0MDRlYmZiN2YzNzIzMTQ1NzlhYTQ3ZTMzOTEifQ%3D%3D
Host: localhost:3000
Origin: http://localhost:3000
回复：
set-cookie: XSRF-TOKEN=eyJpdiI6IitnbFNyUncvZzlSVUxUc0pYbU9pZWc9PSIsInZhbHVlIjoiVW8vM3RaR0d4eDRWaUc1WENUVndMK0F4K0JJdmpGcTEzNUhTcjZWTk8zb3BjQlNiVXh4d3lEVE45OWM2U0RsUSIsIm1hYyI6ImUzOTA4Zjk5OTQ3NDdjZmRmNTE3YmU3M2NmMzM4ZDBjMjA5YjBjNjFmNmE4YjFiNzA2YmJiYjEzZTYxMGU4YzEifQ%3D%3D; expires=Sun, 12-Jul-2020 22:13:33 GMT; Max-Age=7200; path=/; samesite=lax
set-cookie: laravel_session=eyJpdiI6ImFtT1JqL3dmd1hwcE5sMWk5c3pCWHc9PSIsInZhbHVlIjoidHk2K21TN2RUSEtFbXJKRis5endtY0lwT25pdllxOHpvUDg3NDh3RmdSNUhTdGI2cnpTbWIyUmw2NmJ1bXp3diIsIm1hYyI6Ijc1ODNmYjJlOTBlNTMzYjVmZGUxM2FiYWFkYzc1MGE0YjQ3Njc3YjEyNzJmMWY5NWJjN2FiNWY3NDdjMjk1NGYifQ%3D%3D; expires=Sun, 12-Jul-2020 22:13:33 GMT; Max-Age=7200; path=/; httponly; samesite=lax
当触发 OK 状态码时，http://localhost:3000/auth/api/user 应该正确响应，但它没有；要求：
Authorization: 204
Cache-Control: no-cache
Connection: keep-alive
Cookie: auth.strategy=laravelSanctum; auth._token_expiration.laravelSanctum=false; XSRF-TOKEN=eyJpdiI6IitnbFNyUncvZzlSVUxUc0pYbU9pZWc9PSIsInZhbHVlIjoiVW8vM3RaR0d4eDRWaUc1WENUVndMK0F4K0JJdmpGcTEzNUhTcjZWTk8zb3BjQlNiVXh4d3lEVE45OWM2U0RsUSIsIm1hYyI6ImUzOTA4Zjk5OTQ3NDdjZmRmNTE3YmU3M2NmMzM4ZDBjMjA5YjBjNjFmNmE4YjFiNzA2YmJiYjEzZTYxMGU4YzEifQ%3D%3D; laravel_session=eyJpdiI6ImFtT1JqL3dmd1hwcE5sMWk5c3pCWHc9PSIsInZhbHVlIjoidHk2K21TN2RUSEtFbXJKRis5endtY0lwT25pdllxOHpvUDg3NDh3RmdSNUhTdGI2cnpTbWIyUmw2NmJ1bXp3diIsIm1hYyI6Ijc1ODNmYjJlOTBlNTMzYjVmZGUxM2FiYWFkYzc1MGE0YjQ3Njc3YjEyNzJmMWY5NWJjN2FiNWY3NDdjMjk1NGYifQ%3D%3D; auth._token.laravelSanctum=204
Host: localhost:3000
回复：
Status Code: 401 Unauthorized
Remote Address: 127.0.0.1:3000
Referrer Policy: no-referrer-when-downgrade
access-control-allow-credentials: true
access-control-allow-origin:
cache-control: no-cache, private
connection: close
content-type: application/json
date: Sun, 12 Jul 2020 20:13:33 GMT, Sun, 12 Jul 2020 20:13:33 GMT
host: localhost:8000
phpdebugbar-id: Xc04736bfc1d9d6354be969c4e921b568
Transfer-Encoding: chunked
vary: Origin
x-powered-by: PHP/7.4.8
现在通过 Nuxt-Proxy 运行。