Jwt-Authとトークン
トークンはインターフェースのセキュリティメカニズムとして使用されます。APPまたはWEB（VUE、REACTJSなどで構築）はトークンを使用してバックエンドインターフェースと対話し、セキュリティを実現します。
jwt-authには2つの重要なパラメーターがあり、.envで設定できます。
JWT_TTLによって生成されたトークンの有効期限が切れてから何分後、デフォルトは60分
です。JWT_REFRESH_TTLによって生成されたトークンは、新しいトークンを更新できる分数を指定します。デフォルトは20160分と14日です。
ここでは、JWTの有効期限と更新のメカニズムを理解する必要があります。有効期限は簡単に理解できます。この期間を過ぎると、トークンは無効になります。更新時間は通常、有効期限よりも長くなります。この更新時間が有効である限り、トークンの有効期限が切れても、新しいトークンと交換できます。これにより、アプリケーションの長期的な可用性を実現し、ログに記録する必要がなくなります。再び。
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)
{
}
}
例外処理のためにハンドラーを更新します
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ストア更新トークン
/*
|-------------------------------------------------------------------------------
| 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);
},
},
};