控制台错误与vue-auth和axios："Uncaught (in promise)错误:请求失败，状态代码为401“

在使用 Vue.js、vue-auth 和 axios 时，如果你在控制台中看到类似“Uncaught (in promise) 错误: 请求失败，状态代码为 401”的错误，这通常意味着你的请求未通过身份验证。状态代码 401 表示未经授权，通常是因为缺少或无效的身份验证令牌。

以下是一些常见的解决方案和调试步骤，帮助你解决这个问题：

1. 确保正确设置了身份验证令牌

确保你在发送请求时正确地设置了身份验证令牌。通常，你需要在 axios 请求头中添加 Authorization 字段。

import axios from 'axios';

// 假设你有一个函数来获取存储的令牌
const token = getAuthToken();

const instance = axios.create({
  baseURL: 'https://api.example.com',
  headers: {
    'Authorization': `Bearer ${token}`
  }
});

instance.get('/protected-endpoint')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Request failed with status code', error.response.status);
  });

2. 检查令牌的有效性

确保你的令牌是有效的，并且没有过期。如果令牌无效或过期，服务器会返回 401 状态码。

3. 拦截器处理 401 错误

你可以使用 axios 拦截器来处理 401 错误，例如自动刷新令牌或重定向到登录页面。

import axios from 'axios';
import { refreshToken, redirectToLogin } from './authService';

const instance = axios.create({
  baseURL: 'https://api.example.com'
});

instance.interceptors.response.use(
  response => response,
  async error => {
    if (error.response.status === 401) {
      // 尝试刷新令牌
      try {
        const newToken = await refreshToken();
        error.config.headers['Authorization'] = `Bearer ${newToken}`;
        return axios(error.config);
      } catch (refreshError) {
        // 刷新令牌失败，重定向到登录页面
        redirectToLogin();
      }
    }
    return Promise.reject(error);
  }
);

4. 确保后端配置正确

确保你的后端 API 正确地配置了身份验证，并且能够接受和验证你的令牌。

5. 检查 CORS 配置

如果你的前端和后端在不同的域上运行，确保你的后端配置了 CORS，并允许带有凭据的请求。

6. 使用 vue-auth

如果你使用 vue-auth，确保你正确地配置了身份验证策略和令牌存储。

import Vue from 'vue';
import VueAuth from '@websanova/vue-auth';
import axios from 'axios';
import VueAxios from 'vue-axios';
import auth from '@websanova/vue-auth/drivers/auth/bearer.js';
import http from '@websanova/vue-auth/drivers/http/axios.1.x.js';
import router from '@websanova/vue-auth/drivers/router/vue-router.2.x.js';

Vue.use(VueAxios, axios);
Vue.use(VueAuth, {
  auth: auth,
  http: http,
  router: router,
  tokenDefaultName: 'auth_token',
  tokenStore: ['localStorage'],
  rolesVar: 'role',
  loginData: { url: 'auth/login', method: 'POST', redirect: '/', fetchUser: false },
  fetchData: { url: 'auth/user', method: 'GET', enabled: true },
  refreshData: { url: 'auth/refresh', method: 'GET', enabled: true, interval: 30 }
});