如何在 Laravel 和 Vue.js 中使用 jwt-auth 检查用户是不是经过身份验证

Posted 2023-02-22

【中文标题】如何在 Laravel 和 Vue.js 中使用 jwt-auth 检查用户是不是经过身份验证

【英文标题】：How to check whether user is authenticated or not using jwt-auth in Laravel and Vue.js如何在 Laravel 和 Vue.js 中使用 jwt-auth 检查用户是否经过身份验证

【发布时间】：2018-07-22 12:20:16

【问题描述】：

我使用 Laravel 5.4 创建了一个 API，并在其中实现了 JWT 身份验证。现在，我正在从 Vue.js 项目访问我的 API，并在登录后获取令牌。但我不知道如何使用令牌来检查用户是否经过身份验证。解决方法是什么？

这是 Vue.js login() 方法：

login() 
    if(this.credentials.login && this.credentials.password) 
        axios.post('http://localhost:8000/api/login', this.credentials)
            .then(response => 
                if(response.data.success)                             
                    this.token = response.data.token;
                
            )  
            .catch(error => 
                console.log(error);
            );
    

这里是

/**
 * API Login
 *
 * @param Request $request
 * @return \Illuminate\Http\JsonResponse
 */
public function login(Request $request)

    $credentials = $request->only('login', 'password');

    $validator = Validator::make($credentials, [
        'login' => 'required|min:4',
        'password' => 'required|min:6'
    ]);

    if($validator->fails()) 
        $error = $validator->messages()->toJson();
        return response()->json([ 'success' => true, 'error' => $error ]);
    

    try 
        if(!$token = JWTAuth::attempt($credentials)) 
            return response()->json([
                'success' => false,
                'error' => 'Неверные логин или пароль.'
            ], 401);
        
     catch (JWTException $e) 
        return response()->json([
            'success' => false,
            'error' => 'Не удалось создать токен.'
        ], 500);
    

    return response()->json([
        'success' => true,
        'token' => $token
    ]);

顺便说一句，API 在http://localhost:8000/ 上运行，Vue.js 项目在http://localhost:8080/ 上运行

【参考方案1】：

在授权用户并获取令牌后，您可以在每个后续请求中包含令牌，很少有地方可以包含令牌，在 ?token=<token> 之后的请求中作为请求参数，在 @ 下的标头内987654324@ 以及如何从该令牌中获取Authenticated 用户，您可以查看official docs，它为您提供了一个具体示例。

【讨论】：

我知道在 Laravel 中如何处理令牌，但我不知道在 Vue 中如何处理它。例如：我的routes.js 文件中有/dashboard 路由，它显示了一个Dashboard.vue 组件。在其中我必须检查用户身份验证，如果是false，请将其重定向到/login。

将您的token 存储在共享服务中或local storage 内部，然后在Vue 中创建interceptor (***.com/questions/47946680/…) 并在每个Authorized call 上附加令牌，如果令牌有timed out 或invalid，JWT 将返回 401 响应，您可以监听该响应并清除您的token 并将用户重定向回/login 页面。

让我试一试，稍后我会给你答复。还是谢谢你）

P.S：不要忘记您还从服务器返回 500 错误代码，所以如果您也处理该响应会很好@КамиловТимур