前言
由于HTTP协定是不储存状态的,当我们透过帐号密码验证一个使用者时,下一个request请求就把刚刚的使用者忘了,即该软件程序就不知道谁是谁,我们就还需要再用户验证一次。因此为了保证软件程序的安全使用,我们就需要验证用户否处于登录状态。
在大多数前后端分离的项目中,JWT是常见的一个认证标准,特别适合用于分布式站点的单点登录场景。JWT全称是JSON web token。是一种为了在网络应用中传递数据而创造的一种开放标准。在JWT之前,大多数的web应用是采用session认证的,前后端分离开发成为主流之后,JWT也就登上了舞台。它定义了一种紧凑的、自包含的方式,用于在各方之间以JSON对象安全地传输信息。此信息可以验证和信任,因为它是数字签名的。通过JSON形式作为Web应用中的令牌,用于在各方之间安全地将信息作为JSON对象传输。在数据传输过程中还可以完成数据加密、签名等相关处理。
1.传统认证方式
Session认证方式
http协议本身是一种无状态的协议,如果用户向服务器提供了用户名和密码来进行用户认证,下次请求时,用户还要再一次进行用户认证才行。因为根据http协议,服务器并不能知道是哪个用户发出的请求,所以为了让我们的应用能识别是哪个用户发出的请求,我们只能在服务器存储─份用户登录的信息,这份登录信息会在响应时传递给浏览器,告诉其保存为cookie,以便下次请求时发送给我们的应用,这样应用就能识别请求来自哪个用户。
通常使用传统Session认证方式下会暴露出以下问题:
用户经过应用认证后,应用都要在服务端做一次记录,以方便用户下次请求的鉴别,通常而言session都是保存在内存中,而随着认证用户的增多,服务端的开销会明显增大;
用户认证后,服务端做认证记录,如果认证的记录被保存在内存中的话,用户下次请求还必须要请求在这台服务器上,这样才能拿到授权的资源。在分布式的应用上,限制了负载均衡器的能力。以此限制了应用的扩展能力;
session是基于cookie来进行用户识别,cookie如果被截获,用户很容易受到CSRF(跨站伪造请求攻击)攻击;
在前后端分离系统中应用解耦后增加了部署的复杂性。通常用户一次请求就要转发多次。如果用session每次携带sessionid到服务器,服务器还要查询用户信息。同时如果用户很多。这些信息存储在服务器内存中,给服务器增加负担。还有就是sessionid就是一个特征值,表达的信息不够丰富。不容易扩展。而且如果你后端应用是多节点部署。那么就需要实现session共享机制。不方便集群应用。
基于Token的鉴权机制
基于token的鉴权机制类似于http协议也是无状态的,它不需要在服务端去保留用户的认证信息或者会话信息。这就意味着基于token认证机制的应用不需要去考虑用户在哪一台服务器登录了,这就为应用的扩展提供了便利。
2、JWT
JWT的构成
一个JWT由三段字符串构成,第一段我们叫它头部(hear),第二部分被称为载荷(payload),最后一部分则叫做签证(signature)。
头部(hear)
JWT的头部包含两部分信息:
声明使用的加密算法+声明类型
载荷(payload)
JWT的这个部分是用来存储有效信息的地方,包含有三个部分:
标准中注册的声明+公共的声明+私有的声明
签证(signature)
JWT这个部分由三部分组成:
header+payload+secret
*这部分是通过加密后的header和加密后的payload使用.
连接成的字符串,再通过header中声明的加密方式进行加盐secret组合加密,然后就构成了jwt的第三部分。
前端JWT的使用
例如登录验证
instance.interceptors.request.use(config => {
config.headers.Authorization = getToken()
return config
}, error => {
Promise.reject(error)
})
instance.interceptors.response.use(res => {
let ret = res.data;
if (ret.code == Code.SUCCESS) {
return res;
} else if (ret.code == Code.UNAUTH) {
store.dispatch('logout').then(() => {
MessageBox.confirm('账号已过期, 点击确定重新登录?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
router.push('/login');
})
})
} else if (ret.code == Code.UNAUTHZ) {
Message.error(ret.msg)
}
else if(ret.code == Code.ERROR){
Message.error(ret.msg)
}
return Promise.resolve(res)
}, err => {
Message.warning("请求异常")
return Promise.reject(err)
})
与后端交互的代码
export default {
login(username, password) {
const data = {
username,
password
}
return request({
url: '/login',
method: 'post',
data
})
},
logout() {
return request.post('/logout')
}