使用Sanctum响应的Laravel Vue SPA未经授权 [英] Laravel Vue SPA using Sanctum response Unauthorized

问题描述

我的本​​地计算机上的Sanctum Auth系统运行良好，并且没有错误.但是我部署的应用程序在授权用户时遇到了麻烦.当我登录时，它发送一个获取用户数据的请求，然后进行重定向.身份验证完成后，您将被重定向，并且该应用发出GET请求以获取更多数据.此GET路线使用laravel圣所来保护.但是后端未注册用户已成功登录尝试，因此它发送401未经授权错误.这是一些代码...

The Sanctum Auth system on my local machine works well and I have no errors. But my deployed app is having trouble with authorizing a user. When I login it sends a request to get the user data then redirects. After auth completes you are redirected and the app make a GET request for more data. This GET route is guarded using laravel sanctum. But the backend is not registering that the user has made a successful login attempt so it sends a 401 Unauthorized error. Here is some code...

loadUser操作

loadUser action from store.js

actions: {
    async loadUser({ commit, dispatch }) {
        if (isLoggedIn()) {
            try {
                const user = (await Axios.get('/user')).data;
                commit('setUser', user);
                commit('setLoggedIn', true);
            } catch (error) {
                dispatch('logout');
            }
        }
    },
}

routs.js上的Route Guard进行检查以查看isLoggedIn(这只是本地的布尔存储)

Route Guard on the routs.js checking to see isLoggedIn (which is just a boolean store locally)

router.beforeEach((to, from, next) => {
    if (to.matched.some(record => record.meta.requiresAuth)) {
    // if (to.meta.requiresAuth) {
        if (isLoggedIn()) {
            next();
        } else {
            next({
                name: 'home'
            });
        }
    } else {
        next();
    }
})

有人指出，我忘记了bootstrap.js中axios的withCredetials设置.我做了此添加，但问题仍然存在.

It was pointed out that I had forgotten the withCredetials setting for axios in bootstrap.js. I made this addition but my issue still remains.

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
window.axios.defaults.withCredentials = true;

在服务器端路由中间件防护(这是请求被拒绝的地方)

Route middleware guard on the server side (this is where the request is getting turned away)

Route::middleware('auth:sanctum')->group(function () {
    Route::apiResource('trucks', 'Api\TruckController');
});

在laravel cors.php配置文件中，我将"supports_credentials"从false更改为true

In the laravel cors.php config file I changed the "supports_credentials" from false to true

'supports_credentials' => true,

在我看来，cookie信息并没有通过api调用(但是我真的不确定).此设置在我的本地计算机上有效，但在我部署到的服务器上无效.

It seems to me that the cookie information is not being over the api call (but I'm really not sure). This setup is working on my local machine but not on the server that I have deployed to.

推荐答案

需要将环境变量添加到SANCTUM_STATEFUL_DOMAINS的.env文件中，并使其等于域名.

Needed to add an environment variable to the .env file for SANCTUM_STATEFUL_DOMAINS and made that equal the domain name.

在laravel sanctum.php配置文件中...

In the laravel sanctum.php config file...

'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', 'localhost,127.0.0.1')),

这篇关于使用Sanctum响应的Laravel Vue SPA未经授权的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！