• 欢迎来到本博客,希望可以y一起学习与分享

JWT实战:使用axios+PHP实现登录认证

PHP benz 来源:JWT实战:使用axios+PHP实现登录认证 3年前 (2018-04-09) 140次浏览 0个评论 扫描二维码
文章目录[隐藏]

上一篇文中,我们学习了什么是JWT(Json Web Token),今天我们来结合实例给大家讲述JWT的实战应用,就是如何使用前端Axios与后端PHP实现用户登录鉴权认证的过程。

文中涉及的重要知识点有:

因此在阅读这边文章之前,请先了解以上知识点以及JWT的基本概念,这样你会很快理解我们这篇文章中的实例代码。

准备

在本站上篇文章《有关JWT(Json Web Token)的那些事》有介绍用户登录鉴权流程:

  • 用户使用用户名密码来请求服务器
  • 服务器进行验证用户的信息
  • 服务器通过验证发送给用户一个token
  • 客户端存储token,并在每次请求时附送上这个token值
  • 服务端验证token值,并返回数据

那么现在我们就按这个流程开始。

HTML

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

详细的代码,可以下载demo源码中查看,这里样式我们使用的是Bootstrap3的经典样式。

Javascript

前端Javascript异步请求,我们使用Axios库,当然你也可以使用jQuery的Ajax方法。

首先引入axios库:

按照流程,

    • 1.提交登录表单,发送用户名和密码到PHP后端,
    • 2.后端验证成功后,会发送一个token给前端,
    • 3.前端再拿这个token去请求需要用户权限访问,
    • 4.后端验证toen,鉴权,返回相应结果。

下面的js代码实现了1,3两步。

很显然,当登录成功后,立马使用本地存储token,然后把这个token放在请求头header里,再次去请求后端另一个用户信息接口,如果成功了就显示用户信息。

如果要退出登录,我们不需要再次去请求后端接口,直接前端清空本地存储就OK了。

登录成功后,当我们刷新页面(再次请求需要登录后才能访问的页面),需要进行判断,判断本地存储中是否有token,如果有token,那就拿去给后端接口验证下token是否合法,如果没问题就显示用户相关信息,如果验证失败,那可能是token过去或者伪造的token等原因。

PHP

后端我们使用了一个专门的JWT库:php-jwt

使用composer安装php-jwt,接收到登录用户名和密码后,PHP验证用户名和密码是否正确(实际开发中应该结合数据库,从数据库里拿用户名和密码比对,本实例为了演示只做简单验证),如果用户名和密码准确无误,那么就签发token,在token中,我们可以定义token的签发者、过期时间等等,并返回给前端。注意在签发token时,我们需要定义一个密钥,这个密钥是一个私钥,实际应用中是保密的不可告诉别人。

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

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

结束语

以上就是整个JWT的实战应用,我们可以看到,在用户鉴权的过程中并没有使用Session或者Cookie,服务端无需存储用户会话信息。只用了一个Token串,建立前后端的验证的数据传递,实现了有效的登录鉴权过程。


文章 JWT实战:使用axios+PHP实现登录认证 转载需要注明出处
喜欢 (0)

您必须 登录 才能发表评论!