Если вы используете аутентификацию по токену с паспортом laravel, всегда устанавливайте заголовок аутентификации (для любого клиентского вызова) Authorization = Bearer your_token для защищенных маршрутов при вызове из клиента. Я делаю простой пример аутентификации с Laravel Passport и Vue.js и загружаю его в github, пожалуйста, проверьте его по этой ссылке . Я также рекомендую вам прочитать этот пост
Ваш логин в Laravel должен выглядеть следующим образом
public function login (Request $request) {
$user = User::where('email', $request->email)->first();
if ($user) {
if (Hash::check($request->password, $user->password)) {
$token = $user->createToken('Laravel Password Grant Client')->accessToken;
$response = ['token' => $token];
return response($response, 200);
} else {
$response = "Password missmatch";
return response($response, 422);
}
} else {
$response = 'User does not exist';
return response($response, 422);
}
мой маршрут Ларавела, 'middleware' => ['json.response'], я использую, чтобы заставить JSON все данные
Route::group(['middleware' => ['json.response']], function () {
Route::middleware('auth:api')->get('/user', function (Request $request) {
return $request->user();
});
// public routes
Route::post('/login', 'Api\AuthController@login')->name('login.api');
Route::post('/register', 'Api\AuthController@register')->name('register.api');
// private routes
Route::middleware('auth:api')->group(function () {
Route::get('/logout', 'Api\AuthController@logout')->name('logout');
});
});
мой guards в config/auth.php
'guards' => [
'web' => [
'driver' => 'session',
'provider' => 'users',
],
'api' => [
'driver' => 'passport',
'provider' => 'users',
],
],
, затем в vue вы можете использовать vuex для хранения токена и пользовательские данные для его повторного использования store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const debug = process.env.NODE_ENV !== 'production'
export default new Vuex.Store({
strict: debug,
state: {
auth: null,
token: null,
check:false
},
getters: {
auth: state => state.auth,
token: state => state.token,
},
mutations: {
SET_TOKEN(state, token) {
state.token = token
},
FETCH_auth_SUCCESS(state, auth) {
state.auth = auth
state.check = true
},
FETCH_auth_FAILURE(state) {
state.token = null
},
LOGOUT(state) {
state.auth = null
state.token = null
state.check = false
},
UPDATE_auth(state, { auth }) {
state.auth = auth
}
},
actions: {
saveToken({ commit, dispatch }, { token, remember }) {
commit('SET_TOKEN', token)
// if you need store token in cookie (remember me option)
// Cookies.set('token', token, { expires: remember ? 365 : null })
},
async fetchauth({ commit,state }) {
try {
axios.defaults.headers.common.Authorization = `Bearer ${state.token}`;
const { data } = await axios.get('/api/user')
commit('FETCH_auth_SUCCESS', data)
} catch (e) {
// Cookies.remove('token')
commit('FETCH_auth_FAILURE')
}
},
updateauth({ commit }, payload) {
commit('UPDATE_auth', payload)
},
async logout({ commit,state }) {
try {
axios.defaults.headers.common.Authorization = `Bearer ${state.token}`;
await axios.get('/api/logout')
} catch (e) {console.log(e) }
// Cookies.remove('token')
commit('LOGOUT')
},
}
});
Примечание Я установил токен axios.defaults.headers.common.Authorization = 'Bearer ${state.token}'; для каждого вызова Axios (защищенные маршруты), но вы можете сделать это глобально один раз.
метод входа в vue
methods: {
login() {
console.log("Login");
axios
.post("/api/login", {
email: this.form.email,
password: this.form.password
})
.then(res => {
// save token to vuex
this.$store.dispatch("saveToken", { token: res.data.token });
// get user data, store in vuex
this.$store.dispatch("fetchauth");
// redirect
this.$router.push({path:'/dashboard'});
})
.catch(e => {
console.log(e);
});
}
}
Когда вы совершаете вызов к защищенным маршрутам с помощью 'auth:api', в первую очередь вам необходимо установить токен в заголовке, чтобы получить доступ к ресурсам. В axios это axios.defaults.headers.common.Authorization = 'Bearer ${state.token}';.