使用护照和 axios 访问受保护的控制器时出现 401 未经授权的错误

Question

我正在使用 laravel 5.8 预设反应。目前，我正在尝试进行身份验证，我还决定在后端使用 passport，在前端使用 axios，但是在向受保护的控制器 AdminController@index

发出 axios 请求时出现此错误

GET http://localhost:8000/api/admin/index 401 (Unauthorized)

我预计不会得到它，因为我认为我对用户进行了身份验证

我遵循了 laravel 护照安装指南，现在我可以注册、登录用户并获取它的访问令牌，但似乎用户在新的 axios 请求上注销，因为我收到 401 错误。这是一些上下文

在中间件中我添加了这一行


protected $middleware = [
        \Laravel\Passport\Http\Middleware\CreateFreshApiToken::class,
]

//in AuthServiceProvider I added this and added Carbon because of error
Passport::routes(function ($router) {
            $router->forAccessTokens();
            $router->forPersonalAccessTokens();
            $router->forTransientTokens();
        });

        Passport::tokensExpireIn(Carbon::now()->addMinutes(10));

        Passport::refreshTokensExpireIn(Carbon::now()->addDays(10));

        Passport::cookie('user_data');

我在用户模型中添加了


use Notifiable, HasApiTokens;
//and
protected $primaryKey = 'id';

已将 auth:api driver 更改为护照

'api' => [
            'driver' => 'passport',
            'provider' => 'users',
            'hash' => false,
        ],

这是我的迁移table


Schema::create('users', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('name')->unique();
            $table->string('password');
            $table->rememberToken();
            $table->timestamps();
        });

这是我登录和注册几乎一样的axios请求

        var bodyFormData = new FormData;
        bodyFormData.append('name', this.state.name);
        bodyFormData.append('password', this.state.password);
        axios({
            method: 'post',
            url: '/api/login',
            data: bodyFormData,
            config: { headers: {'Content-Type': 'multipart/form-data' }}
        })
            .then(function (response) {
                if(response.data.auth){
                    var cookies = new Cookies();
                    cookies.set('access_token', response.data.access_token, { path: '/' });
                }
            })
            .catch(function (response) {
            });

这是我的 api 路线：


//this one is to register using passport
Route::post('/register', 'AuthenticateController@register');

//this one is to login using passport
Route::post('/login', 'AuthenticateController@login');

//this one is to check if user is authenticated
Route::post('/check', 'AuthenticateController@test');

//this one has methods which I want to protect
Route::get('/admin/index', 'AdminController@index');

这是我的 AuthenticationController，它给我访问令牌、注册和登录，似乎可以工作

    public function register(Request $request){
        $validatedData = $request->validate([
            'name' => 'required|max:55|unique:users',
            'password' => 'required'
        ]);
        $validatedData['password'] = bcrypt($request->password);
        $user = User::create($validatedData);
        $accessToken = $user->createToken('authToken')->accessToken;

        return response()->json(["user" => $user, "token" => $accessToken]);

    }

    public function login(Request $request)
    {
        $loginData = $request->validate([
            'name' => 'required',
            'password' => 'required'
        ]);

        if(!auth()->attempt($loginData, true)) {
            return response(['auth' => 
    false]);
        }
        $accessToken = auth()->user()->createToken('authToken')->accessToken;
        return response(['user' => auth()->user(), 'access_token' => 
    $accessToken, 'auth' => true]);
    }

    public function check(){
        $check= auth()->check();
        return response(['user' => $check]);
    }

这是我的 AdminController，它在执行索引方法时出现 401 错误

//as I understood after login I can protect my api with middleware line for example 10 minutes, but unsuccessfully

 public function __construct()
    {
        $this->middleware('auth:api'); 

    }

    public function index(){
        return response(['foto' => 'testing protection']);
    }

这里是我的react组件axios请求发起了401错误

axios.get("/api/admin/index", {
        headers : {
            'Content-Type' : 'application/json',
            'Accept' : 'application/json',
            'Authorization' : 'Bearer' + cookie.get('access_token')
        }})
        .then(function (response) {
            alert(response.data.foto);
        })
        .catch(function (response) {
            alert("bad")
        })

//I tried 
// headers.append('Authorization', 'bearer ' + cookie.get('access_token'));
// headers.append('Authentication', 'bearer ' + cookie.get('access_token'));
// headers.append('Authorization', 'JWT ' + cookie.get('access_token'));
// headers.append('Authorization', cookie.get('access_token'));
// but error persists

我只想用middleware(auth:api)

保护我的api

也auth->check()给我错误，我认为这不好

Answer 1

所以我发现我的错误，而不是使用

headers : {
            'Authorization' : 'Bearer' + cookie.get('access_token')
        }

我不得不使用

//added space
headers : {
            'Authorization' : 'Bearer ' + cookie.get('access_token')
        }

但我必须做的奇怪的事情是在内核中间件中添加即将到来的行：

\App\Http\Middleware\EncryptCookies::class,
\Illuminate\Session\Middleware\StartSession::class

我只是尝试使用 postman 而不是 axios，但收到错误消息，提示会话有问题，从那以后很容易找到需要的部分

使用护照和 axios 访问受保护的控制器时出现 401 未经授权的错误

401 unauthorized error when accessing protected controller, using passport and axios

reactjs

laravel-passport