實戰模擬│JWT 登錄認證
- 2022 年 7 月 4 日
- 筆記
- 《實戰模擬訓練系列》, JWT, 開發語言, 經驗分享
🎈 Token 認證流程
- 作為目前最流行的跨域認證解決方案,
JWT(JSON Web Token)
深受開發者的喜愛,主要流程如下: - 客戶端發送賬號和密碼請求登錄
- 服務端收到請求,驗證賬號密碼是否通過
- 驗證成功後,服務端會生成唯一的
token
,並將其返回給客戶端 - 客戶端接受到
token
,將其存儲在cookie
或者localStroge
中 - 之後每一次客戶端向服務端發送請求,都會通過
cookie
或者header
攜帶該token
- 服務端驗證
token
的有效性,通過才返迴響應的數據

基於 Token 認證流程
🎈 Token 認證優點
- 支持跨域訪問:
Cookie
是不允許跨域訪問的,這一點對Token
機制是不存在的,前提是傳輸的用戶認證信息通過HTTP
頭傳輸 - 無狀態:
Token
機制在服務端不需要存儲session
信息,因為Token
自身包含了所有登錄用戶的信息,只需要在客戶端的cookie
或本地介質存儲狀態信息 - 適用性更廣: 只要是支持
http
協議的客戶端,就可以使用token
認證。 - 無需考慮CSRF: 由於不再依賴
cookie
,所以採用token
認證方式不會發生CSRF
,所以也就無需考慮CSRF
的防禦
🎈 JWT 結構
- 一個
JWT
實際上就是一個字符串,它由三部分組成:頭部
、載荷
與簽名
。中間用點.
分隔成三個部分。注意JWT
內部是沒有換行的。

JWT 結構
- 🎨 頭部 / header
header
由兩部分組成:token
的類型JWT
和算法名稱:HMAC
、SHA256
、RSA
{
"alg": "HS256",
"typ": "JWT"
}
- 🎨 載荷 / Payload
Payload
部分也是一個JSON
對象,用來存放實際需要傳遞的數據。JWT
指定七個默認字段供選擇。- 除了默認字段之外,你完全可以添加自己想要的任何字段,一般用戶登錄成功後,就將用戶信息存放在這裡
iss:發行人
exp:到期時間
sub:主題
aud:用戶
nbf:在此之前不可用
iat:發佈時間
jti:JWT ID用於標識該JWT
{
"iss": "xxxxxxx",
"sub": "xxxxxxx",
"aud": "xxxxxxx",
"user": [
'username': '極客飛兔',
'gender': 1,
'nickname': '飛兔小哥'
]
}
- 🎨 簽名 / Signature
- 簽名部分是對上面的 頭部、載荷 兩部分數據進行的數據簽名
- 為了保證數據不被篡改,則需要指定一個密鑰,而這個密鑰一般只有你知道,並且存放在服務端
- 生成簽名的代碼一般如下:
// 其中secret 是密鑰
String signature = HMACSHA256(base64UrlEncode(header) + "." + base64UrlEncode(payload), secret)
🎈 JWT 基本使用
- 客戶端收到服務器返回的
JWT
,可以儲存在Cookie
裏面, 也可以儲存在localStorage
- 然後 客戶端每次與服務器通信,都要帶上這個
JWT
- 把
JWT
保存在Cookie
裏面發送請求,這樣不能跨域
- 更好的做法是放在
HTTP
請求的頭信息Authorization
字段裏面
fetch('license/login', {
headers: {
'Authorization': 'X-TOKEN' + token
}
})
🎈 實戰:使用 JWT 登錄認證
-
這裡使用
ThinkPHP6
整合JWT
登錄認證進行實戰模擬 -
🎨 安裝 JWT 擴展
composer require firebase/php-jwt
- 🎨 封裝生成 JWT 和解密方法
<?php
/**
* Desc: JWT認證
* Author: autofelix
* Time: 2022/07/04
*/
namespace app\services;
use app\Helper;
use Firebase\JWT\JWT;
use Firebase\JWT\Key;
class JwtService
{
protected $salt;
public function __construct()
{
//從配置信息這種或取唯一字符串,你可以隨便寫比如md5('token')
$this->salt = config('jwt.salt') || "autofelix";
}
// jwt生成
public function generateToken($user)
{
$data = array(
"iss" => 'autofelix', //簽發者 可以為空
"aud" => 'autofelix', //面象的用戶,可以為空
"iat" => Helper::getTimestamp(), //簽發時間
"nbf" => Helper::getTimestamp(), //立馬生效
"exp" => Helper::getTimestamp() + 7200, //token 過期時間 兩小時
"user" => [ // 記錄用戶信息
'id' => $user->id,
'username' => $user->username,
'truename' => $user->truename,
'phone' => $user->phone,
'email' => $user->email,
'role_id' => $user->role_id
]
);
$jwt = JWT::encode($data, md5($this->salt), 'HS256');
return $jwt;
}
// jwt解密
public function chekToken($token)
{
JWT::$leeway = 60; //當前時間減去60,把時間留點餘地
$decoded = JWT::decode($token, new Key(md5($this->salt), 'HS256'));
return $decoded;
}
}
- 🎨 用戶登錄後,生成 JWT 標識
<?php
declare (strict_types=1);
namespace app\controller;
use think\Request;
use app\ResponseCode;
use app\Helper;
use app\model\User as UserModel;
use app\services\JwtService;
class License
{
public function login(Request $request)
{
$data = $request->only(['username', 'password', 'code']);
// ....進行驗證的相關邏輯...
$user = UserModel::where('username', $data['username'])->find();
// 驗證通過生成 JWT, 返回給前端保存
$token = (new JwtService())->generateToken($user);
return json([
'code' => ResponseCode::SUCCESS,
'message' => '登錄成功',
'data' => [
'token' => $token
]
]);
}
}
- 🎨 中間件驗證用戶是否登錄
- 在
middleware.php
註冊中間件
<?php
// 全局中間件定義文件
return [
// ...其他中間件
// JWT驗證
\app\middleware\Auth::class
];
- 註冊中間件後,在權限驗證中間件中完善驗證邏輯
<?php
declare (strict_types=1);
namespace app\middleware;
use app\ResponseCode;
use app\services\JwtService;
class Auth
{
private $router_white_list = ['login'];
public function handle($request, \Closure $next)
{
if (!in_array($request->pathinfo(), $this->router_white_list)) {
$token = $request->header('token');
try {
// jwt 驗證
$jwt = (new JwtService())->chekToken($token);
} catch (\Throwable $e) {
return json([
'code' => ResponseCode::ERROR,
'msg' => 'Token驗證失敗'
]);
}
$request->user = $jwt->user;
}
return $next($request);
}
}