持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第27天，点击查看活动详情

后台项目 Express-Mysql-Vue3-Ts-Pinia 设置 token

引言

通过之前一段时间 Express 和 Mysql 的学习

这里尝试来搭建一个 后台系统 来巩固下学习的技术。

token概念

我们一般所说的 token ，就是 json web token，简称 jwt

token 的工作流程为：

前端登录，提交账号和密码
- 此时服务端会确认账号和密码，成功的话，会返回客户端一个 token 字符串值
- 这个值代表的就是这个用户，是由用户的信息所组成
前端收到这个 token，将其放置在 localstorage 中。

并在每次提交请求时，携带这个 token 值
- 服务端接收到这个请求，就会收到这个 token 值
- 就会解析 token，就能够获取到哪个用户的请求来的，也称 认证用户。
- token验证成功后，就会将数据返回给前端

jwt

上面说了，token 是由用户的身份确定的。那么说一下 jwt 的组成

主要是三部分，header.payload.signature 分别对应 头，有效载荷，签名

有效载荷 的值，主要是用户信息。

设置 token

首先在后端安装 jsonwebtoken 这个库

npm i jsonwebtoken

在与 app.js 同级目录下创建一个 utils 文件夹，再创建一个 useJwt.js 文件，用于设置 token

设置 token 主要是通过 jwt.sign 方法，需要传递三个参数

const jwt = require('jsonwebtoken');
const config = require('../config/config.default')

const setToken = (username) => {
  return jwt.sign(
    // payload 存储用户信息
    { username },
    // 私钥
    config.PRIVATE_KEY,
    // 设置过期时间
    { expiresIn: config.JWT_EXPIRED }
  )
}

module.exports = {
  setToken
}

我们在登录成功时，进行引入使用，即 controller/user/index.js 文件中进行引入

const { setToken } = require('../../utils/useJwt')

// 登陆成功
res.send({
  code: 200,
  data: {
    message: '登录成功！',
    token: setToken(username),
    flag: true
  }
})

此时我们的 token 即可生成完毕。

我们尝试在前端进行登录，发现可以成功获取到 token 值

并且如果再次登录，进行比较后，会发现两个 token 的值是不一样的。

总结

通过 Express-Mysql-Vue3-TS-Pinia 做出一个后台系统项目，解释 token，并设置 token

后台项目 Express-Mysql-Vue3-TS-Pinia 设置 token

后台项目 Express-Mysql-Vue3-Ts-Pinia 设置 token

引言

token概念

jwt

设置 token

总结