Laravel 护照未经身份验证的消息答案

【问题标题】：Laravel passport unauthenticated messageLaravel 护照未经身份验证的消息
【发布时间】：2021-06-19 10:44:29
【问题描述】：

我已经有一段时间遇到这个问题了，只是我无法理解问题出在哪里。所以我有后端 Laravel 和前端 Vue；登录没问题，我得到了令牌，但是当我使用auth:api 进入其中一条路线时，我得到了"message":"Unauthenticated."。我将令牌保存在前面，所以我应该将它与任何请求一起发送到后端还是有其他方法？

登录控制器.php

    public function login(Request $request)
    {
        $login = $request->validate([
            'email' => 'required',
            'password' => 'required',
        ]);

        if(Auth::attempt($login))
        {
            return response(['message' => 'Invalid login']);
        }

        $user = User::where('email', $request->email)->first();
        $accessToken = $user->createToken('Laravel Password Grant Client')->accessToken;
        return response()->json(['user' => $user, 'access_token' => $accessToken]);
    }

api.php

Route::namespace('\\')->middleware('auth:api')->group(function(){
    Route::resource('budget', BudgetController::class);
});

user.js


const state = {
    token: localStorage.getItem('access_token') || null,
    isAuthenticated: localStorage.getItem('access_token') !== null
}

const getters = {
    isAuthenticated: state => state.isAuthenticated
}

const actions = {
    async retrieveToken({commit}, payload){
       console.log(payload)
        const response = axios.post(url + '/login', payload)
            .then(response => {
                const token = response.data.access_token

                localStorage.setItem('access_token', token)

                commit('setToken', token)
            })
    }
}

const mutations = {
    setToken: (token) => state.token = token
}

【问题讨论】：

将Authorization 标头作为Bearer 令牌与每个需要身份验证的请求一起发送。 const token = '..your token..' axios.post(url, { //...data }, { headers: { 'Authorization': Bearer ${token} } })

标签： php laravel vue.js

【解决方案1】：

好的，所以在我的第二个模块中，我使用令牌作为标题，如下所示：


const state = {
  budget: [],
  header: {
    headers: {
      Authorization: `Bearer ${localStorage.getItem("access_token") || null}`,
      withCredentials: true,
      "Access-Control-Allow-Origin": "*"
    },
  }
};


const getters = {
  allBudget: (state) => state.budget,
};

const actions = {
  async fetchBudget({ commit, state }) {
    const response = await axios.get(url, state.header);

    console.log(state.header);
    commit("setBudget", response.data);
  },
};

之后我收到了 CORS 错误，所以我需要在文件 xampp\apache\conf\httpd.conf 的末尾添加两个指令

Header Set Access-Control-Allow-Origin * 

Header Set Access-Control-Allow-Headers *

【讨论】：