小編給大家分享一下JWT中如何使用axios+PHP實(shí)現(xiàn)登錄認(rèn)證，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)建站主營(yíng)順義網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,app軟件開(kāi)發(fā)公司,順義h5微信小程序開(kāi)發(fā)搭建,順義網(wǎng)站營(yíng)銷(xiāo)推廣歡迎順義等地區(qū)企業(yè)咨詢(xún)

HTML

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

<script src="/tupian/20230522/ppcode><script>    document.querySelector('#sub-btn').onclick = function() {    let username = document.querySelector('#username').value;    let password = document.querySelector('#password').value;       var params = new URLSearchParams();    params.append('user', username);    params.append('pass', password);    axios.post(        'user.php?action=login',         params    )    .then((response) => {        if (response.data.result === 'success') {            // 本地存儲(chǔ)token            localStorage.setItem('jwt', response.data.jwt);            // 把token加入header里            axios.defaults.headers.common['X-token'] = response.data.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 {                }            });        } else {            console.log(response.data.msg);        }    })    .catch(function (error) {        console.log(error);    });}</script>

很顯然，當(dāng)?shù)卿洺晒?，立馬使用本地存儲(chǔ)token，然后把這個(gè)token放在請(qǐng)求頭header里，再次去請(qǐng)求后端另一個(gè)用戶(hù)信息接口，如果成功了就顯示用戶(hù)信息。

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

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

登錄成功后，當(dāng)我們刷新頁(yè)面（再次請(qǐng)求需要登錄后才能訪問(wèn)的頁(yè)面），需要進(jìn)行判斷，判斷本地存儲(chǔ)中是否有token，如果有token，那就拿去給后端接口驗(yàn)證下token是否合法，如果沒(méi)問(wèn)題就顯示用戶(hù)相關(guān)信息，如果驗(yàn)證失敗，那可能是token過(guò)去或者偽造的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';}

PHP

后端我們使用了一個(gè)專(zhuān)門(mén)的JWT庫(kù)：php-jwt

使用composer安裝php-jwt，接收到登錄用戶(hù)名和密碼后，PHP驗(yàn)證用戶(hù)名和密碼是否正確（實(shí)際開(kāi)發(fā)中應(yīng)該結(jié)合數(shù)據(jù)庫(kù)，從數(shù)據(jù)庫(kù)里拿用戶(hù)名和密碼比對(duì)，本實(shí)例為了演示只做簡(jiǎn)單驗(yàn)證），如果用戶(hù)名和密碼準(zhǔn)確無(wú)誤，那么就簽發(fā)token，在token中，我們可以定義token的簽發(fā)者、過(guò)期時(shí)間等等，并返回給前端。注意在簽發(fā)token時(shí)，我們需要定義一個(gè)密鑰，這個(gè)密鑰是一個(gè)私鑰，實(shí)際應(yīng)用中是保密的不可告訴別人。

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') { //用戶(hù)名和密碼正確，則簽發(fā)tokon            $nowtime = time();            $token = [                'iss' => 'http://www.xuebuyuan.com', //簽發(fā)者                'aud' => 'http://www.xuebuyuan.com', //jwt所面向的用戶(hù)                'iat' => $nowtime, //簽發(fā)時(shí)間                'nbf' => $nowtime + 10, //在什么時(shí)間之后該jwt才可用                'exp' => $nowtime + 600, //過(guò)期時(shí)間-10min                'data' => [                    'userid' => 1,                    'username' => $username                ]            ];            $jwt = JWT::encode($token, KEY);            $res['result'] = 'success';            $res['jwt'] = $jwt;        } else {            $res['msg'] = '用戶(hù)名或密碼錯(cuò)誤!';        }    }    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']

用戶(hù)每次請(qǐng)求都要帶上后端簽發(fā)的token，后端獲取請(qǐng)求中的token，PHP中使用$_SERVER['HTTP_X_TOKEN']就可以獲取token值。這個(gè)X_TOKEN就是在我們前端的請(qǐng)求header頭信息中。

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

以上是“JWT中如何使用axios+PHP實(shí)現(xiàn)登錄認(rèn)證”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站名稱(chēng)：JWT中如何使用axios+PHP實(shí)現(xiàn)登錄認(rèn)證-創(chuàng)新互聯(lián)
鏈接地址：http://www.rwnh.cn/article6/copiig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、網(wǎng)站排名、響應(yīng)式網(wǎng)站、關(guān)鍵詞優(yōu)化、建站公司、微信公眾號(hào)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)