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

后台项目 Express-Mysql-Vue3-Ts-Pinia 前端token

引言

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

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

前端处理token

上一节，我们将 后端处理 token 的逻辑已经处理完毕。

现在开始处理前端逻辑。

首先需要设置一个 token 的函数。

const setToken = (token) => {
  setStorage({
    key: ACCESS_TOKEN,
    value: token
  })
}

之后我们知道，只有在登录成功后，才能获取 token，并且跳转到工作台首页。

await userLogin({
    username: ruleForm.username,
    password: CryptoJS.MD5(ruleForm.password).toString()
  })
    .then((res) => {
      const { flag, message, token } = res.data

      if (flag) {
        ElMessage({
          type: 'success',
          message
        })

        // 请求
        setToken(token)

        router.push('/workbench')
      } else {
        ElMessage.error(message)
      }
    })
    .catch((err) => {
      console.log('err', err)
    })

这样的话，前端成功获取到 token，并保存到本地的 localstorage 中，但是问题还没有结束。

我们希望的是，每次请求都要携带这个 token，那么就需要修改我们的 axios，即 前置守卫。

在 前置守卫 当中，我们请求之前，需要获取本地的 token 值，如果存在 token 的话，我们将该 token的值放到 headers 中。

这样的话，也和我们的后端相通了，获取的都是 headers.authorization

service.interceptors.request.use(
  (config: any) => {
    console.log(config, 'config')

    const { get: getStorage } = useStorage()

    const token = getStorage(ACCESS_TOKEN)

    if (token) {
      config.headers.authorization = token
    }

    return config
  },
  (error) => {
    // return Promise.reject(error);
    console.log('error', error)
    return error
  }
)

通过上面的步骤，我们可以成功的登录并且跳转到首页。

此时还有个问题，需要测试我们的 token 确实已经在每个请求发起后，headers.authorization 中是我们的 token 值

我们快速模拟一个 test 测试，后端也将接口写好

可以看到在我们成功登陆后，工作台发起一个 test 请求，就可以看到请求的 headers 中存在 token 的值

总结

通过 Express-Mysql-Vue3-TS-Pinia 做出一个 后台系统 项目，前端处理 token 的逻辑。