vue.js 使用Laravel应用程序登录后重定向至SPA

2cmtqfgy  于 2023-02-24  发布在  Vue.js
关注(0)|答案(2)|浏览(138)

我有两个应用程序:SPA使用Vuejs 3构建,API使用Laravel构建。
sPA在127.0.0.1:5173上运行,API在127.0.0.1:8000上运行
用户可以成功进行身份验证,但API抛出了此错误:http://127.0.0.1:8000/home路由的404 not found,并且不会重定向到其他页面
我知道这是登录Laravel后重定向的路由,因为我的LoginController中有这一行:

protected $redirectTo = RouteServiceProvider::HOME;

并且将RouteServiceProvider设置为/home
在我的web.php中没有这条路径
我的问题是如何重定向到前端应用程序,可以在另一个网址?
SPA中执行的登录函数:

login(data) {
          return new Promise((resolve, reject) => {
            axios.get('/sanctum/csrf-cookie').then((response) => {
              if (response) {
                axios
                  .post('/login', data)
                  .then((response) => {
                      console.log(response)
                      resolve(response)
                      setTimeout(() => {
                          this.loginData.email = ''
                          this.loginData.password = ''
                      }, 1000)
                  })
                  .catch((err) => {
                    reject(err)
                  })
              }
            })
          })
        },

. env文件:

SANCTUM_STATEFUL_DOMAINS=127.0.0.1:5173
SESSION_DOMAIN=127.0.0.1

相关php:

'paths' => [
        'api/*', 
        '/login',
        '/logout',
        'sanctum/csrf-cookie'
    ],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['*'],
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => true,

php文件夹:

'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', sprintf(
        '%s%s',
        'localhost,127.0.0.1:5173,localhost:3000,127.0.0.1,127.0.0.1:8000,::1',
        Sanctum::currentApplicationUrlWithPort()
    ))),

网页. php:

Route::post('login', [LoginController::class, 'login']);

api.php中,我有SPA使用的注销路由和athor路由。

odopli94

odopli941#

您应该使用您的vue路线而不是Laravel路线进行重定向。在您成功登录axios呼叫后,您可以推送您的路线:

axios
      .post('/login', data)
       .then((response) => {
       // CHECK FOR SUCCESFULL LOGIN
       router.push('/your-url');
    })
00jrzges

00jrzges2#

我通过在axios请求中传递头来修复它,然后使用vue routes进行重定向:

axios
      .post('/login', data, {
       headers: {
              'Content-Type': 'application/json',
              'Accept': 'application/json',
             },
       })
     .then((response) => {
       router.push('/dashboard');
     })

相关问题