- 前端使用用户名、密码来请求服務器
- 服务器通过数据库查询等操作验证用户的信息
- 服务器通过验证发送给用户一个token
- 后台验证token值并返回数据
- token会有过期,前端登出的时候直接清空本地token服务端不需要任何操作
- session要求服务端存储信息,并且根据id能够检索而token不需要。在大规模系统中对每个请求都检索会话信息鈳能是一个复杂和耗时的过程。但另外一方面服务端要通过token来解析用户身份也需要定义好相应的协议
- session一般通过cookie来交互,而token方式更加灵活可以是cookie,也可以是其他header也可以放在请求的内容中。不使用cookie可以带来跨域上的便利性
- token的生成方式更加多样化,可以由第三方服务来提供
本文前后端完全分离前端通过ajax请求后端数据;不再使用模板引擎;
在原有的前端项目中我们来尝试写一个koa2语言的后台与之匹配;
而后端koa2的目录;结合前几节课的知识点;
1运行你的前端项目;运行后浏览器自动打开
2运行后台koa2-test ;因为都在本地运行的;所以 确保后端和前端的端口不一致;比如3000;
// 具体参数我们在后面进行解释
这里插个题外话,koa2每次修改代码都重启一次太麻烦;我们安装nodemon 热启动;
这个ajax我自己按照喜好封装起来了。具体
所以vue的登录实现的ajax使用;
koa-jwt 主要提供路由权限控制的功能它会对需要限制的资源请求进行检查;
//第一个参数是载荷,用于编码后存储在 token 中的数据 //第二个是密钥自己定义的,验证的时候也是要相同的密钥才能解码
vue的登录实现成功后前端再次请求服務器,需要把token返回给后台;
用户登出;在本地清空储存的token即可;
}
这篇文章主要介绍了Vue路由之JWT身份認证的实现方法文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值需要的朋友们下面随着小编来一起学习学习吧
一、JWT身份认证简介
JSON Web Token(JWT)是目前最流行的跨域身份验证解决方案,相较于session机制服务器就不需要保存任何 session 数据了,也就是说垺务器变成无状态了,从而比较容易实现扩展JWT 实际上是一个令牌(Token),服务器会将一些元数据、指定的secret进行签名并生成token并返回给客户端,客户端得到这个服务器返回的令牌后需要将其存储到 Cookie 或
localStorage 中,此后每次与服务器通信都要带上这个令牌,可以把它放到 Cookie 中自动发送但这样做不能跨域,所以更好的做法是将其放到 HTTP 请求头 Authorization 字段里面
② 对元数据、secret密钥进行签名,并生成对应的token;
③ 对token进行校验是否过期;
生成的token为一个很长的字符串分为三部分,每部分由.号隔开即 头部.载荷.签名,5秒后token校验结果为error即token已经过期,校验的时候会得到token的解码数据,主要包括生成token时候的元数据、token的签发时间(iat)、token的过期时间(exp)
由于在使用jwt认证的时候客户端向服务器发起请求的时候,都要带上token即要获取到token并将其放到请求头的Authorization字段中,服务器才能从authorization中取出token并进行校验所以我们必须通过拦截器去实现,在每次请求之前将请求进行攔截然后添加上token,再继续向服务器发起请求
四、通过路由钩子进行vue的登录实现校验
我们需要在路由跳转之前,进行vue的登录实现校验即校验vue的登录实现的token是否已经过期,如果token没有失效则可以继续访问页面;如果token已经失效,那么检查一下所访问的页面是否需要vue的登录实現才能访问如果是需要vue的登录实现后才能访问,那么跳转到vue的登录实现页面;如果是不需要vue的登录实现也能访问的页面则继续访问;
} else { // 如果访问的不是login页面则继续访问当前要访问的页面
} else { // 如果访问的页面是不需要vue的登录实现的,则直接继续访问
上面item.meta.needLogin这个needLogin是在router中进行自定义配置的,在配置路由的时候允许通过meta属性配置一些自定义的元数据,如下所示:
jwt认证主要就是Vue路由钩子beforeEach()的应用,以及请求拦截器的封装在每次路由跳转前进行token认证(校验),检测token是否失效其校验过程就是向服务器发起一个请求,比如"/validate"由于客户端请求拦截器的作用,会在發起"/validate"请求之前在请求头的Authorization字段加上token,服务器收到token后就能对token是否有效进行校验了然后返回token校验结果,客户端再根据token的校验结果进行路由嘚具体跳转
以上就是本文的全部内容,希望对大家的学习有所帮助也希望大家多多支持脚本之家。
}