Laravel Vue js 注销出现错误未捕获的运行时错误：

Question

也可使用 Laravel 和 Vue js 2 项目

我使用 Laravel 和 Vue js 2 以及 Laravel Passport 实现了用户身份验证系统。我使用邮递员的后端也可以正常注销。我有以下 AuthController 用于注销

 public function logout(Request $request)
    {
        auth()->user()->token()->revoke();

        return response()->json(['message' => 'Sucessfully Logout']);
    }

和API

  Route::middleware('auth:api')->group(function () {
        Route::post('/logout', [AuthController::class, 'logout']);
       });

这在邮递员中运行良好

但是在我的前端 vue js 端，我在 store/index.ts 中有以下注销方法

 logout(context){
      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)
      })
      })
    }

和注销链接

<li class="nav-item" v-if="loggedIn">
          <router-link class="nav-link"  :to="{name:'Logout'}">Logout</router-link>
        </li>

但是当我尝试注销时，屏幕上出现以下错误

Request failed with status code 401

AxiosError@webpack-internal:///./node_modules/axios/lib/core/AxiosError.js:23:18

settle@webpack-internal:///./node_modules/axios/lib/core/settle.js:24:12

onloadend@webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:111:66

浏览器检查控制台标题说

POST http://127.0.0.1:8000/api/v1/logout

401 Unauthorized strict-origin-when-cross-origin

并回复消息说“消息“未经身份验证。”

我该如何解决这个问题？

Answer 1

“Bearer”和令牌之间似乎缺少空格，这可能会导致授权标头的格式出现问题。

axios.defaults.headers.common['Authorization'] = 'Bearer ' + context.state.token;

确保 context.state.token 中存储的令牌正确且在注销请求时可用。