摘要：今天我們來結合實例給大家講述的實戰應用，就是如何使用前端與后端實現用戶登錄鑒權認證的過程。只用了一個串，建立前后端的驗證的數據傳遞，實現了有效的登錄鑒權過程。

今天我們來結合實例給大家講述JWT(Json Web Token)的實戰應用，就是如何使用前端Axios與后端PHP實現用戶登錄鑒權認證的過程。

axios異步請求：axios-基于Promise的HTTP請求客戶端
php-jwt庫：https://github.com/firebase/p...
HTML5相關知識
因此在閱讀這邊文章之前，請先了解以上知識點以及JWT的基本概念，這樣你會很快理解我們這篇文章中的實例代碼。

用戶登錄鑒權流程：

用戶使用用戶名密碼來請求服務器
服務器進行驗證用戶的信息
服務器通過驗證發送給用戶一個token
客戶端存儲token，并在每次請求時附送上這個token值
服務端驗證token值，并返回數據
那么現在我們就按這個流程開始。

我們的HTML結構是這樣的：一個登錄表單，供用戶輸入用戶名和密碼，以及提交按鈕；一個是登錄成功后的顯示信息。

  

    用戶名
    
  
  

    密碼
    
  
  登錄

    

    
演示用戶名和密碼都是demo。

歡迎，您已登錄，退出>>

詳細的代碼，可以下載demo源碼中查看，這里樣式我們使用的是Bootstrap3的經典樣式。

前端Javascript異步請求，我們使用Axios庫，當然你也可以使用jQuery的Ajax方法。

首先引入axios庫：

按照流程，
1.提交登錄表單，發送用戶名和密碼到PHP后端，
2.后端驗證成功后，會發送一個token給前端，
3.前端再拿這個token去請求需要用戶權限訪問，
4.后端驗證toen，鑒權，返回相應結果。
下面的js代碼實現了1，3兩步。

很顯然，當登錄成功后，立馬使用本地存儲token，然后把這個token放在請求頭header里，再次去請求后端另一個用戶信息接口，如果成功了就顯示用戶信息。

如果要退出登錄，我們不需要再次去請求后端接口，直接前端清空本地存儲就OK了。

document.querySelector("#logout").onclick = function() {
    localStorage.removeItem("jwt");
    document.querySelector("#showpage").style.display = "block";
    document.querySelector("#user").style.display = "none";
}

登錄成功后，當我們刷新頁面（再次請求需要登錄后才能訪問的頁面），需要進行判斷，判斷本地存儲中是否有token，如果有token，那就拿去給后端接口驗證下token是否合法，如果沒問題就顯示用戶相關信息，如果驗證失敗，那可能是token過去或者偽造的token等原因。

let jwt =  localStorage.getItem("jwt");

if (jwt) {
    axios.defaults.headers.common["X-token"] = jwt;
    axios.get("user.php")
    .then(function (response) {
        if (response.data.result === "success") {
            document.querySelector("#showpage").style.display = "none";
            document.querySelector("#user").style.display = "block";
            document.querySelector("#uname").innerHTML = response.data.info.data.username;
        } else {
            document.querySelector("#showpage").style.display = "block";
            console.log(response.data.msg);
        }
    })
    .catch(function (error) {
        console.log(error);
    });
} else {
    document.querySelector("#showpage").style.display = "block";
}

后端我們使用了一個專門的JWT庫：php-jwt

使用composer安裝php-jwt，接收到登錄用戶名和密碼后，PHP驗證用戶名和密碼是否正確（實際開發中應該結合數據庫，從數據庫里拿用戶名和密碼比對，本實例為了演示只做簡單驗證），如果用戶名和密碼準確無誤，那么就簽發token，在token中，我們可以定義token的簽發者、過期時間等等，并返回給前端。注意在簽發token時，我們需要定義一個密鑰，這個密鑰是一個私鑰，實際應用中是保密的不可告訴別人。

require "vendor/autoload.php";

use FirebaseJWTJWT;

define("KEY", "1gHuiop975cdashyex9Ud23ldsvm2Xq"); //密鑰

$res["result"] = "failed";

$action = isset($_GET["action"]) ? $_GET["action"] : "";

if ($action == "login") {
    if ($_SERVER["REQUEST_METHOD"] == "POST") {
        $username = htmlentities($_POST["user"]);
        $password = htmlentities($_POST["pass"]);

        if ($username == "demo" && $password == "demo") { //用戶名和密碼正確，則簽發tokon
            $nowtime = time();
            $token = [
                "iss" => "http://www.helloweba.net", //簽發者
                "aud" => "http://www.helloweba.net", //jwt所面向的用戶
                "iat" => $nowtime, //簽發時間
                "nbf" => $nowtime + 10, //在什么時間之后該jwt才可用
                "exp" => $nowtime + 600, //過期時間-10min
                "data" => [
                    "userid" => 1,
                    "username" => $username
                ]
            ];
            $jwt = JWT::encode($token, KEY);
            $res["result"] = "success";
            $res["jwt"] = $jwt;
        } else {
            $res["msg"] = "用戶名或密碼錯誤!";
        }
    }
    echo json_encode($res);

} else {
    $jwt = isset($_SERVER["HTTP_X_TOKEN"]) ? $_SERVER["HTTP_X_TOKEN"] : "";
    if (empty($jwt)) {
        $res["msg"] = "You do not have permission to access.";
        echo json_encode($res);
        exit;
    }

    try {
        JWT::$leeway = 60;
        $decoded = JWT::decode($jwt, KEY, ["HS256"]);
        $arr = (array)$decoded;
        if ($arr["exp"] < time()) {
            $res["msg"] = "請重新登錄";
        } else {
            $res["result"] = "success";
            $res["info"] = $arr;
        }
    } catch(Exception $e) {
        $res["msg"] = "Token驗證失敗,請重新登錄";
    }

    echo json_encode($res);
}

用戶每次請求都要帶上后端簽發的token，后端獲取請求中的token，PHP中使用$_SERVER["HTTP_X_TOKEN"]就可以獲取token值。這個X_TOKEN就是在我們前端的請求header頭信息中。

然后PHP拿到這個token后，解密分析token值，返回給前端即可。

以上就是整個JWT的實戰應用，我們可以看到，在用戶鑒權的過程中并沒有使用Session或者Cookie，服務端無需存儲用戶會話信息。只用了一個Token串，建立前后端的驗證的數據傳遞，實現了有效的登錄鑒權過程。

在線演示demo：https://www.helloweba.net/dem...