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);
},
},
};
