vue3前台如何获取token

在前台获取 token 的方式，通常是通过向后台发送登录请求，并在登录成功后，将后台返回的 token 保存在前台，然后在后续请求中将 token 作为请求头信息发送给后台。

在 Vue3 中，可以使用 Axios 库来发送请求并获取 token。以下是一个示例代码：

import axios from 'axios';

// 发送登录请求
axios.post('/api/login', {
  username: 'your_username',
  password: 'your_password'
}).then(response => {
  // 登录成功，将 token 保存在前台
  const token = response.data.token;
  localStorage.setItem('token', token);
}).catch(error => {
  console.error(error);
});

// 发送带有 token 的请求
axios.get('/api/data', {
  headers: {
    Authorization: `Bearer ${localStorage.getItem('token')}`
  }
}).then(response => {
  // 请求成功
}).catch(error => {
  console.error(error);
});

在示例中，我们首先发送登录请求，登录成功后将后台返回的 token 保存在前台的 localStorage 中。然后，我们使用带有 Authorization 请求头的 Axios 请求来获取数据。其中，Authorization 请求头的值为 `Bearer ${token}`，其中的 `${token}` 就是我们在登录成功后保存的 token。

需要注意的是，前台获取到的 token 应该进行安全的保管，以防止被恶意利用。同时，在发送请求时，应该对 token 进行有效性校验，以确保请求的合法性。