Laravel+Vue.js 2集成Passport登出遇401未授权错误求助

问题核心分析 #

后端通过Postman调用登出接口正常，但前端Vue请求返回401，核心原因集中在请求头格式错误、token有效性或路由匹配这几个方面，以下是具体排查和解决步骤：

1. 修复Authorization头的空格问题（最常见原因） #

前端代码中Bearer与token之间缺少空格，导致Laravel无法正确解析认证令牌：

// 错误写法：无空格
axios.defaults.headers.common['Authorization'] = 'Bearer' + context.state.token;

// 正确写法：Bearer后添加空格
axios.defaults.headers.common['Authorization'] = 'Bearer ' + context.state.token;

Postman中你手动添加了空格所以请求正常，前端遗漏空格会直接导致认证失败返回401。

2. 验证token的有效性与正确性 #

在登出方法中添加日志，确认token是否正确获取：

logout(context){
  console.log('当前token:', context.state.token); // 检查控制台输出的token是否与登录时一致
  axios.defaults.headers.common['Authorization'] = 'Bearer ' + context.state.token;
  
  return new Promise((resolve, reject)=>{
    axios.post('/logout').then(res=> {
      localStorage.removeItem('accessToken')
      context.commit('removeToken')
      resolve(res.data)
    }).catch(error=> {
      reject(error)
    })
  })
}

如果token为空或与登录时的令牌不一致，检查登录逻辑是否正确将token存入localStorage和Vuex状态中。

3. 确认请求URL与后端路由匹配 #

后端路由位于auth:api组下的/logout，若你的API前缀为api/v1（比如在RouteServiceProvider中配置），需确保前端请求地址正确：

• 若axios已配置baseURL：

  axios.defaults.baseURL = '/api/v1';
  

  此时axios.post('/logout')会自动拼接为/api/v1/logout，与浏览器显示的请求地址一致。
• 若未配置baseURL，直接写完整路径：

  axios.post('/api/v1/logout')
  

4. 优化后端登出逻辑（可选） #

为避免token不存在时抛出错误，后端方法可增加判断：

public function logout(Request $request)
{
    $user = auth()->user();
    if ($user && $user->token()) {
        $user->token()->revoke();
        return response()->json(['message' => 'Successfully Logout']);
    }
    return response()->json(['message' => 'No active token found'], 400);
}

5. 确认前端登出触发逻辑 #

你的router-link跳转到Logout路由，需确保Logout组件中正确调用store的登出方法：

<script>
export default {
  created() {
    this.$store.dispatch('logout').then(() => {
      this.$router.push('/login'); // 登出后跳转登录页
    }).catch(err => {
      console.error('登出失败:', err);
    });
  }
}
</script>

内容的提问来源于stack exchange，提问作者Matakoththuwakoni