通过 React 发送令牌

Question

我写了这个控制器的方法

public function login(Request $request)
{
    $attr = $request->validate([
        'email' => 'required|string|email',
        'password' => 'required|string|min:6'
    ]);

    if (!Auth::attempt($attr)) {
        return $this->error('Credentials not match', 401);
    }

    return response()->json([
       'access_token' => auth()->user()->createToken('auth_token')->plainTextToken,
       'token_type' => 'Bearer',
    ]);
}

它是返回令牌。但是我怎样才能将这个令牌用于其他请求呢？所以我用 React 写了这段代码 instance.js

import axios from 'axios'
let instance = axios.create({
    baseURL: 'http://localhost:8000',
    withCredentials: true,
    headers: {
        'Access-Control-Allow-Origin': '*', 'Content-Type': 'application/json',
    }
});

export default instance;

Login.js（函数句柄提交）

const handleSubmit = (event) => {
    event.preventDefault();
    instance.post('/api/auth/login', {
            email: emailRef.current.value,
            password: passwordRef.current.value
        
    }).then(res => {

        instance.get('/api/me').then((response) => {
            console.log(response);
        }
        )

    })

}

我发现 withCredentials: true 解决了这个问题并自动在 header 中设置 cookie 的信息。但是当我尝试向 /api/me 发送请求时，我的状态为 401。你能帮帮我吗？

Answer 1

我不知道您的系统，但是在您通过身份验证后，在 /api/auth/login 上，您不会将令牌传递给 api/me。

我认为你必须尝试类似：

instance.post('/api/auth/login', {
    email: emailRef.current.value,
    password: passwordRef.current.value

}).then(res => {
    let yourToken  = res.data.access_token; 
    instance.get('/api/me', {
        headers: {
            'Authorization': 'bearer ' + yourToken
        }}).then((response) => {
            console.log(response);
        });
})

如果您需要通过您的应用程序保存和共享您的令牌，您可以使用Context API