vue3 登录 如何实现token校验

在 Vue3 中实现 Token 校验可以分为以下步骤：

1. 用户在登录页面输入用户名和密码，向服务器发送请求进行登录操作。
2. 服务器验证用户的身份信息，如果验证通过，则返回一个 Token 给客户端。
3. 客户端将 Token 存储到本地，可以使用浏览器的 localStorage 或 sessionStorage 存储。
4. 在需要进行 Token 校验的请求中，客户端将 Token 携带在请求头中发送到服务器。
5. 服务器验证 Token 的有效性，如果验证通过，则返回请求的数据；否则，返回 401 或 403 状态码，表示未经授权的访问。

下面是一个示例代码：

// 登录操作
async function login(username, password) {
  const response = await axios.post('/api/login', { username, password })
  const token = response.data.token
  localStorage.setItem('token', token)
}

// 发送需要 Token 校验的请求
async function fetchUser() {
  const token = localStorage.getItem('token')
  const response = await axios.get('/api/user', {
    headers: { Authorization: `Bearer ${token}` }
  })
  return response.data
}

在上面的示例代码中，`login` 函数向服务器发送登录请求，如果验证通过，则将服务器返回的 Token 存储到本地的 localStorage 中。在 `fetchUser` 函数中，我们从 localStorage 中获取 Token，然后在请求头中携带 Token 发送请求到服务器进行验证。服务器通过验证后返回请求的数据，否则返回状态码 401 或 403。