Laravel 前后端分离项目中 Jwt-Auth + Vue 平滑刷新 Token

蔚落 2023-06-27 06:29 14阅读 0赞

### Jwt-Auth and Token ###

Token 作为接口的安全机制，APP端或者WEB端（使用VUE、REACTJS等构建）使用token与后端接口交互，以达到安全的目的。

jwt-auth 有两个重要的参数，可以在 .env 中进行设置

JWT\_TTL 生成的 token 在多少分钟后过期，默认 60 分钟  
JWT\_REFRESH\_TTL 生成的 token，规定在多少分钟内，可以刷新获取一个新 token，默认 20160 分钟，14 天。  
这里需要理解一下 JWT 的过期和刷新机制，过期很好理解，超过了这个时间，token 就无效了。刷新时间一般比过期时间长，只要在这个刷新时间内，即使 token 过期了， 依然可以换取一个新的 token，已达到应用长期可用，不需要重新登录的目的。

### RefreshToken 中间件 ###

php artisan make:middleware RefreshToken

<?php
    
    namespace App\Http\Middleware;
    
    use Auth;
    use Closure;
    use Tymon\JWTAuth\JWTAuth;
    use Tymon\JWTAuth\Exceptions\JWTException;
    use Tymon\JWTAuth\Http\Middleware\BaseMiddleware;
    use Tymon\JWTAuth\Exceptions\TokenExpiredException;
    use Symfony\Component\HttpKernel\Exception\UnauthorizedHttpException;
    
    class RefreshToken extends BaseMiddleware
    { 
        function handle($request, Closure $next)
        { 
            // 检查此次请求中是否带有 token，如果没有则抛出异常。
            $this->checkForToken($request);
    
            // 使用 try 包裹，以捕捉 token 过期所抛出的 TokenExpiredException 异常
            try { 
                // 检测用户的登录状态，如果正常则通过
                if ($this->auth->parseToken()->authenticate()) { 
                    return $next($request);
                }
                throw new UnauthorizedHttpException('jwt-auth', '未登录');
            } catch (TokenExpiredException $exception) { 
                // 此处捕获到了 token 过期所抛出的 TokenExpiredException 异常，我们在这里需要做的是刷新该用户的 token 并将它添加到响应头中
                try { 
                    // 刷新用户的 token
                    $newToken = $this->auth->refresh();
                    $request->headers->set('Authorization','Bearer '.$newToken);
                } catch (JWTException $exception) { 
                    // 如果捕获到此异常，即代表 refresh 也过期了，用户无法刷新令牌，需要重新登录。
                    throw new UnauthorizedHttpException('jwt-auth', $exception->getMessage());
                }
            }
            // 在响应头中返回新的 token
            return $this->setAuthenticationHeader($next($request), $newToken);
        }
    
        public function handle2($request,Closure $next)
        { 
    
        }
    }

### 更新异常处理的 Handler ###

由于我们构建的是 api 服务，所以我们需要更新一下 app/Exceptions/Handler.php 中的 render  
方法，自定义处理一些异常。

<?php
    
    namespace App\Exceptions;
    
    use Exception;
    use Illuminate\Foundation\Exceptions\Handler as ExceptionHandler;
    
    class Handler extends ExceptionHandler
    { 
        /** * A list of the exception types that are not reported. * * @var array */
        protected $dontReport = [
            //
        ];
    
        /** * A list of the inputs that are never flashed for validation exceptions. * * @var array */
        protected $dontFlash = [
            'password',
            'password_confirmation',
        ];
    
        /** * Report or log an exception. * * @param \Exception $exception * @return void */
        public function report(Exception $exception)
        { 
            parent::report($exception);
        }
    
        /** * Render an exception into an HTTP response. * * @param \Illuminate\Http\Request $request * @param \Exception $exception * @return \Illuminate\Http\Response */
        public function render($request, Exception $exception)
        { 
            // 用户认证的异常，我们需要返回 401 的 http code 和错误信息
            if ($exception instanceof UnauthorizedHttpException) { 
                return response($exception->getMessage(), 401);
            }
    
            if ($this->isHttpException($exception)) { 
    			//if (view()->exists('errors.' . $exception->getStatusCode())) { 
    			//API服务器不需要返回视图
    			//return response()->view('errors.' . $exception->getStatusCode(), [], $exception->getStatusCode());
    //}
                //404已交给Vue处理,这里返回视图即可;
                if($exception->getStatusCode()==404){ 
                    return response()->view('app');
                }
                return response()->json(['message' => '出错了'], $exception->getStatusCode());
    
            }
            return parent::render($request, $exception);
        }
    }

### 设置 Axios 拦截器 ###

在 resources/js/app.js 中添加 Axios 响应拦截器

//设置 Axios 拦截器
    axios.interceptors.response.use((response) => { 
    	//获取响应头中的 authorization 
        var token = response.headers.authorization;
        //如果存在 authorization 说明服务器端判定 token 过期了并返回了新的 token
        if (token) { 
        	//Vue 需要做的就是把新的token更新保存到cookie中，调用 Vuex users.js 模块中的 refreshToken 方法
            store.dispatch('refreshToken',{ 
                token:token
            });
        }
        return response;
    });

### Vuex 存储更新token ###

/* |------------------------------------------------------------------------------- | VUEX modules/users.js |------------------------------------------------------------------------------- | The Vuex data store for the Users */
    
    import UserAPI from '../api/users';
    
    /** status = 0 -> 数据尚未加载 status = 1 -> 数据开始加载 status = 2 -> 数据加载成功 status = 3 -> 数据加载失败 */
    
    export const users = { 
    	state: { 
    			// 存储token
            	Authorization: localStorage.getItem('Authorization') ? localStorage.getItem('Authorization') : '',
    	},
    	actions: { 
    			refreshToken({ commit},data){ 
    	            commit('setLoginToken', data.token);
    			}
    	},
        mutations: { 
            	// 修改token，并将token存入cookie：localStorage
                setLoginToken (state, access_token) { 
                    state.Authorization = access_token;
                    localStorage.setItem('Authorization', access_token);
                },
        },
    };

参考：[使用 Jwt-Auth 实现 API 用户认证以及无痛刷新访问令牌][Jwt-Auth _ API]

[Jwt-Auth _ API]: https://learnku.com/articles/7264/using-jwt-auth-to-implement-api-user-authentication-and-painless-refresh-access-token