前端JWT的使用

前言

       由于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')
    }