vue3 401错误

解决方案

当遇到Vue3项目中的401错误时，通常意味着未经授权访问资源。最直接的解决方案是检查身份验证令牌（如JWT）的有效性，并确保请求头中正确设置了Authorization字段。我们还需要确保API端点配置正确，并处理不同场景下的401响应。

一、检查身份验证令牌

需要确认用户是否已经登录并获取了有效的身份验证令牌。在Vue3项目中，可以通过以下方式检查：

javascript
// 在main.js或相关文件中设置axios默认配置
import axios from 'axios'
import { useAuthStore } from '@/stores/auth'</p>

<p>const authStore = useAuthStore()</p>

<p>axios.defaults.headers.common['Authorization'] = <code>Bearer ${authStore.token}


// 添加请求
axios.interceptors.request.use(
  config => {
    const token = authStore.token
    if (token) {
      config.headers['Authorization'] = Bearer ${token}
    }
    return config
  },
  error => Promise.reject(error)
)

二、处理401响应

当收到401响应时，我们需要做出适当的处理，比如重定向到登录页面或刷新令牌。

javascript
// 添加响应
axios.interceptors.response.use(
  response => response,
  async error => {
    if (error.response.status === 401) {
      // 处理401错误
      const originalRequest = error.config</p>

<pre><code>  try {
    // 尝试刷新令牌
    await refreshToken()
    originalRequest.headers['Authorization'] = `Bearer ${authStore.token}`
    return axios(originalRequest)
  } catch (refreshError) {
    // 如果刷新失败，重定向到登录页
    router.push('/login')
    return Promise.reject(error)
  }
}
return Promise.reject(error)

}
)

三、其他可能的解决方案

1. 检查API端点配置

   • 确认后端API地址是否正确
   • 检查跨域资源共享(CORS)设置
   • 确认API版本与前端匹配

2. 使用Vuex管理认证状态

   • 创建专门的auth模块来管理认证状态
   • 提供清晰的状态转换逻辑
   • 实现自动登出功能

3. 添加全局路由守卫
   javascript
router.beforeEach((to, from, next) => {
const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
if (requiresAuth && !authStore.isAuthenticated) {
next('/login')
} else {
next()
}
})


通过以上方法，可以有效解决Vue3项目中的401错误问题。根据具体应用场景选择合适的解决方案，确保应用程序的安全性和用户体验。