乐趣区

关于javascript:基于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 认证(第一次写,写得不好大佬们下手轻点)

退出移动版