什么是token?token 在vue项目中起到什么作用？

token: 在一个 Vue 项目中，"token" 通常指的是用户认证所用的令牌（token）。这个令牌是服务器生成并返回给客户端（通常是前端应用程序，比如 Vue.js 应用），用于验证用户的身份和权限。

如何使用 Token

1. 获取 Token：

   • 用户通常在登录时提供用户名和密码，前端将这些信息发送到后端验证。
   • 如果验证成功，后端会生成一个包含用户信息的 Token，并将其返回给前端。

2. 存储 Token：

   • 前端通常会将 Token 存储在客户端，比如浏览器的 localStorage 或 sessionStorage 中，以便在用户会话期间持久化保存。
   • Vue 项目中可以使用 Vue 插件或 Vuex 来管理和存储 Token。

3. 发送 Token：

   • 每当前端需要向后端进行受保护的请求时（比如获取用户信息、提交数据等），需要将 Token 发送给后端。
   • Token 通常通过请求的 Header（比如 Authorization 头部）或者请求参数（比如 query 参数）的方式发送给后端。

4. 验证 Token：

   • 后端收到请求后，会验证 Token 的有效性和权限。
   • 如果 Token 有效并且用户有足够的权限，后端会处理请求并返回相应的数据。

示例

假设在 Vue 项目中，用户登录成功后，后端返回一个包含 Token 的 JSON 对象：

{ "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiIxMjM0NTY3ODkwIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c" }

前端可以将这个 Token 存储在 localStorage 中：

// 假设登录成功后获取到的 token
const token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiIxMjM0NTY3ODkwIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c";

// 存储到 localStorage 中
localStorage.setItem('token', token);

然后，每次向后端发送请求时，可以从 localStorage 中获取 Token，并将其作为请求的 Authorization 头部发送：

// 获取存储的 token
const token = localStorage.getItem('token');

// 发送请求时设置 Authorization 头部
axios.get('/api/userinfo', {
  headers: {
    Authorization: `Bearer ${token}`
  }
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error('Error fetching user info:', error);
});

这样，Vue 项目中的 Token 就起到了身份验证和授权的作用，确保了用户操作的安全性和可控性。