随着Web应用的发展，为了保证API通信的安全性，很多项目在进行设计时会采用JSON Web Token（JWT）的解决方案。

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

那么JWT中的Token到底是什么？接下来，我们将以登录功能为例进行Token的分析。

登录流程

很多小伙伴对登录的流程已经很熟悉了，我们来看一个最基本的后台系统的登录流程

流程图很清楚了，接下来我们使用 V2 和 Koa 来实现一个登录过程，来看看Token到底是什么

Vue2 + Koa 实现登录

前端代码

1. 前端点击事件

数据的校验就忽略掉，感兴趣的同学可自行书写或者找我要源码，直接看点击事件

handleLogin() {
this.$refs.loginForm.validate((valid) => {
if (valid) {
this.loading = true;
// 这里使用了VueX
this.$store

        .dispatch("user/login", this.loginForm)

        .then(() => {
this.$router.push({ path: this.redirect || "/" });
this.loading = false;

      })

        .catch(() => {
this.loading = false;

      });

    } else {
return false;

    }

  });

}

2. Vuex中的action

校验通过后触发VueX中User模块的Login方法：

async login(context, userInfo) {
const users = {
username: userInfo.mobile,
password: userInfo.password

  }
const token = await login(users)
// 在这里大家可以对返回的数据进行更详细的逻辑处理

  context.commit('SET_TOKEN', token)
setToken(token)

}

3. 封装的接口

export function login(data) {
return request({
url: '/login',
method: 'post',

    data

  })

}

以上三步，是我们从前端向后端发送了请求并携带着用户名和密码，接下来，我们来看看Koa中是如何处理前端的请求的

Koa 处理请求

首先介绍一下Koa：

Koa 基于Node.js平台，由 Express 幕后的原班人马打造，是一款新的服务端 web 框架

Koa的使用极其简单，感兴趣的小伙伴可以参考官方文档尝试用一下

Koa官网：koa.bootcss.com/index.html#…

1. 技术说明

在当前案例的koa中，使用到了jsonwebtoken的依赖包帮助我们去加密生成和解密Token

2. 接口处理

const { login } = require("../app/controller/user")
const jwt = require("jsonwebtoken")
const SECRET = 'test_';

router.post('/login', async (ctx, next) => {
const { username, password } = ctx.request.body
// 这里是调用Controller中的login方法来跟数据库中的数据作对比，可忽略
const userList = await login(username, password)

if (!userList) {
// 这里的errorModel是自己封装的处理错误的模块

        ctx.body = new errorModel('用户名或密码错误', '1001')
return

    }

// ↓↓↓↓↓↓↓↓↓↓↓↓↓↓ ※ 重点看这里 ※ ↓↓↓↓↓↓↓↓↓↓↓↓↓↓
const token = jwt.sign({ userList }, SECRET, { expiresIn: "1h" })


    ctx.body = {
success: true,
state: 200,
message: 'login success',
data: token

    };
return;

})

关于 JWT

上面的重点代码大家看到了，接下来具体给大家解释下JWT

Jwt由三部分组成：header、payload、signature

export interface Jwt {
header: JwtHeader;
payload: JwtPayload | string;
signature: string;

}

header头部

里面的包含的内容有很多，比如用于指定加密算法的alg、指定加密类型的typ，全部参数如下所示：

export interface JwtHeader {
alg: string | Algorithm;

    typ?: string | undefined;

    cty?: string | undefined;

    crit?: Array<string | Exclude<keyof JwtHeader, 'crit'>> | undefined;

    kid?: string | undefined;

    jku?: string | undefined;

    x5u?: string | string[] | undefined;
'x5t#S256'?: string | undefined;

    x5t?: string | undefined;

    x5c?: string | string[] | undefined;

}

payload负载

payload使我们存放信息的地方，里面包含了签发者、过期时间、签发时间等信息

export interface JwtPayload {

    [key: string]: any;

    iss?: string | undefined;

    sub?: string | undefined;

    aud?: string | string[] | undefined;

    exp?: number | undefined;

    nbf?: number | undefined;

    iat?: number | undefined;

    jti?: string | undefined;

}

signature签名

signature 需要使用编码后的 header 和payload以及我们提供的一个密钥（SECRET），然后使用 header 中指定的签名算法进行签名

关于 jwt.sign()

jwt.sign()方法，需要三个基本参数和一个可选参数：payload、secretOrPrivateKey、options和一个callback

export function sign(

    payload: string | Buffer | object,

    secretOrPrivateKey: Secret,

    options: SignOptions,

    callback: SignCallback,
): void;

payload是我们需要加密的一些信息，这个参数对应上面koa代码中的{ userList }，而userList则是我从数据库中查询得到的数据结果

secretOrPrivateKey则是我们自己定义的秘钥，用来后续验证Token时所用

options选项中有很多内容，例如加密算法algorithm、有效期expiresIn等等

export interface SignOptions {
/**

     * Signature algorithm. Could be one of these values :

     * - HS256:    HMAC using SHA-256 hash algorithm (default)

     * - HS384:    HMAC using SHA-384 hash algorithm

     * - HS512:    HMAC using SHA-512 hash algorithm

     * - RS256:    RSASSA using SHA-256 hash algorithm

     * - RS384:    RSASSA using SHA-384 hash algorithm

     * - RS512:    RSASSA using SHA-512 hash algorithm

     * - ES256:    ECDSA using P-256 curve and SHA-256 hash algorithm

     * - ES384:    ECDSA using P-384 curve and SHA-384 hash algorithm

     * - ES512:    ECDSA using P-521 curve and SHA-512 hash algorithm

     * - none:     No digital signature or MAC value included

     */

    algorithm?: Algorithm | undefined;

    keyid?: string | undefined;
/** expressed in seconds or a string describing a time span [zeit/ms](https://github.com/zeit/ms.js).  Eg: 60, "2 days", "10h", "7d" */

    expiresIn?: string | number | undefined;
/** expressed in seconds or a string describing a time span [zeit/ms](https://github.com/zeit/ms.js).  Eg: 60, "2 days", "10h", "7d" */

    notBefore?: string | number | undefined;

    audience?: string | string[] | undefined;

    subject?: string | undefined;

    issuer?: string | undefined;

    jwtid?: string | undefined;

    mutatePayload?: boolean | undefined;

    noTimestamp?: boolean | undefined;

    header?: JwtHeader | undefined;

    encoding?: string | undefined;

    allowInsecureKeySizes?: boolean | undefined;

    allowInvalidAsymmetricKeyTypes?: boolean | undefined;

}

callback则是一个回调函数，有两个参数，默认返回Token

export type SignCallback = (

    error: Error | null,

    encoded: string | undefined,
) => void;

通过以上方法加密之后的结果就是一个Token

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjU3ZmVmMTY0ZTU0YWY2NGZmYzUzZGJkNSIsInhzcmYiOiI0ZWE1YzUwOGE2NTY2ZTc2MjQwNTQzZjhmZWIwNmZkNDU3Nzc3YmUzOTU0OWM0MDE2NDM2YWZkYTY1ZDIzMzBlIiwiaWF0IjoxNDc2NDI3OTMzfQ.PA3QjeyZSUh7H0GfE0vJaKW4LjKJuC3dVLQiY4hii8s

总结

在整个的Koa中，用到了jsonwebtoken这个依赖包，里面有sign()方法

而我们前端所得到的数据则是通过sign()所加密出来的包含自定义秘钥的一份用户信息而已

至于用户信息中有什么内容，可以随便处理，比如用户的ID、用户名、昵称、头像等等

那么这个Token后续有什么用呢？

后续我们可以在前端的拦截器中配置这个Token，让每一次的请求都携带这个Token，因为Koa后续需要对每一次请求进行Token的验证

比如登录成功后请求用户的信息，获取动态路由，再通过前端的router.addRoutes()将动态路由添加到路由对象中去即可