基于jwt认证的实现

起因

http是无状态协议，需要知道是哪一个用户，因此需要一种验证机制。随着技术的发展，分布式web应用的普及，通过session管理用户登录状态成本越来越高，因此慢慢发展成为token的方式做登录身份校验，然后通过token去取redis中的缓存的用户信息，随着之后jwt的出现，校验方式更加简单便捷化，无需通过redis缓存，而是直接根据token取出保存的用户信息，以及对token可用性校验，单点登录更为简单。具体认证的实现过程如下：

什么是jwt

JSON Web Token (JWT)是一个开放标准(RFC 7519)，它定义了一种紧凑的、自包含的方式，用于作为JSON对象在各方之间安全地传输信息。该信息可以被验证和信任，因为它是数字签名的。

jwt的组成

JWT是由三段信息构成的，将这三段信息文本用.链接一起就构成了Jwt字符串。就像这样:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWV9.TJVA95OrM7E2cBab30RMHrHDcEfxjoYZgeFONFh7HgQ


第一部分我们称它为头部（header),第二部分我们称其为载荷（payload, 类似于飞机上承载的物品)，第三部分是签证（signature).

jwt加密流程

1.前端发起登录请求

login({ commit }, userInfo) {
    const { username, password } = userInfo
    return new Promise((resolve, reject) => {
      login({ username: username.trim(), password: password }).then(response => {
        commit('SET_TOKEN', response.token)
        setToken(response.token)
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  }

2.后端接受参数进行登录校验

this.app.jwt.sign({ username: username }, this.app.config.jwt.web.secret, { expiresIn: expiresIn })

如上后端代码使用了nodejs的egg框架，使用的是egg-jwt插件进行加密和解密；其中代码中的username为用户账号（id），secret则为加密的盐值（解密需要用到），expiresIn则为生成的token的有效时间。账号密码验证通过后，你可以自定你的加密内容（payload），其中示例代码加入了username。当然你还可以加入你的userInfo等，并且将生成的toekn返回到前端（思考：很多编程新手喜欢在登录成功之后直接返回了用户的信息，作者是不推荐这样做的；这里我们只返回token，前端拿到返回的token存储起来）

3.登陆成功后前端储存token

login({ username: username.trim(), password: password }).then(response => {
        commit('SET_TOKEN', response.token)//登录成功之后存储token，你可以存在vuex或者local中
        setToken(response.token)
        resolve()
      }).catch(error => {
        reject(error)
      })

jwt解密流程

1.前端发起请求，axios请求拦截器设置headers

service.interceptors.request.use(
  config => {
    // do something before request is sent

    if (store.getters.token) {
      // let each request carry token
      // ['X-Token'] is a custom headers key
      // please modify it according to the actual situation
      config.headers['Authorization'] = getToken()
    }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

作者这里使用的是axios库配合拦截器，具体使用参考：https://www.jianshu.com/p/86122178002a

2.服务端解析headers中的token

const { Status, Code } = ctx.app.config
        if (ctx.get('Authorization')) {
            //拿出token
            let token = ctx.get('Authorization');
            try {
                //解密token
                ctx.app.jwt.verify(token, secret);
            } catch (error) {
                if (error.name == 'TokenExpiredError') {
                	//token过期啦
                    ctx.responseMsg(Status.FAIL.UNAUTHORIZED, { msg: Code.FAIL.TOKEN_EXPIRED.MSG });
                    return;
                } else {
                    ctx.responseMsg(Status.FAIL.UNAUTHORIZED, { msg: Code.FAIL.TOKEN_EXPIRED.MSG });
                    return;
                }
            }
            await next();
        } else {
        	//不合法的请求
            ctx.responseMsg(Status.FAIL.UNAUTHORIZED, { msg: Code.FAIL.ILLEGAL_TOKEN.MSG });
            return;
        }

token：请求头中获取到的token

secret：盐值，和加密的保持一致

其中关于jwt的解密工作使用了中间件，关于egg中间件参考：
https://eggjs.org/zh-cn/basics/middleware.html

3.服务端根据返回的约定code做出相应的响应

service.interceptors.response.use(
  response => {
    // if the custom code is not 20000, it is judged as an error.
    const res = response.data;
    if (res.code !== 20000) {
      Message({
        message: res.msg || 'Error',
        type: 'error',
        duration: 5 * 1000
      })
    } else {
      return res
    }
  },
  error => {
    //console.log(error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    if (error.response.status == 401) {
      MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
        confirmButtonText: 'Re-Login',
        cancelButtonText: 'Cancel',
        type: 'warning'
      }).then(() => {
        store.dispatch('user/resetToken').then(() => {
          location.reload()
        })
      })
    } else if (error.response.status == 422) {

    }
    return Promise.reject(error)
  }
)

其中的code是根据和后端人员约定规范的，可以参考restful风格：
https://zhuanlan.zhihu.com/p/66148320?utm_source=wechat_session&utm_medium=social&utm_oi=986957734650208256

如上即可实现基于jwt认证（第一次写，写得不好大佬们下手轻点）