JWT中如何使用axios+PHP实现登录认证-创新互联

小编给大家分享一下JWT中如何使用axios+PHP实现登录认证，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

创新互联建站主营顺义网站建设的网络公司,主营网站建设方案,app软件开发公司,顺义h5微信小程序开发搭建,顺义网站营销推广欢迎顺义等地区企业咨询

HTML

我们的HTML结构是这样的：一个登录表单，供用户输入用户名和密码，以及提交按钮；一个是登录成功后的显示信息。

<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') {            // 本地存储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>

很显然，当登录成功后，立马使用本地存储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';}

PHP

后端我们使用了一个专门的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.xuebuyuan.com', //签发者                'aud' => 'http://www.xuebuyuan.com', //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']

用户每次请求都要带上后端签发的token，后端获取请求中的token，PHP中使用$_SERVER['HTTP_X_TOKEN']就可以获取token值。这个X_TOKEN就是在我们前端的请求header头信息中。

然后PHP拿到这个token后，解密分析token值，返回给前端即可。

以上是“JWT中如何使用axios+PHP实现登录认证”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

网站名称：JWT中如何使用axios+PHP实现登录认证-创新互联
链接地址：https://www.cdcxhl.com/article6/copiig.html

成都网站建设公司_创新互联，为您提供品牌网站制作、网站排名、响应式网站、关键词优化、建站公司、微信公众号

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联