axios 怎末处理登录

Axios是一个用于发送HTTP请求的JavaScript库。处理登录时，通常需要向服务器发送POST请求，将用户名和密码等凭证提交到服务器进行验证。如果验证成功，服务器会返回一个包含用户信息的JWT（JSON Web Token）。此后，为了让用户保持登录状态，前端需要将JWT存储在本地（通常是localStorage或sessionStorage）并在每次请求时将其放入请求头中，以便服务器进行身份验证。下面是一个使用axios处理登录的示例代码：

import axios from 'axios';

// 登录函数
async function login(username, password) {
  try {
    const response = await axios.post('/api/login', { username, password });
    const token = response.data.token;
    // 将token存储在本地
    localStorage.setItem('token', token);
    return true;
  } catch (error) {
    console.error(error);
    return false;
  }
}

// 将token添加到请求头中
axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

// 发送需要认证的请求
async function fetchData() {
  try {
    const response = await axios.get('/api/data');
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
}

在上面的代码中，我们首先定义了一个`login`函数来处理登录请求，它会将用户名和密码等凭证提交到服务器，并在验证成功后将JWT存储在本地。接着，我们使用axios的拦截器机制，在每次请求时自动将JWT添加到请求头中进行身份验证。最后，我们定义了一个`fetchData`函数来发送需要认证的请求，此时axios会自动将JWT添加到请求头中，以便服务器进行身份验证。