问题
I am using Laravel Passport for the authentication, so I put my routes into middleware protection.
UPDATED
To make it clear, I am adding UsersController too.
public function getUser()
{
$users = Auth::user();
return response()->json($users);
}
//
Route::group(['prefix' => 'v1', 'middleware' => 'auth:api'], function () {
/* users */
Route::get('/users', 'Api\UsersController@getUser');
/* fetch */
Route::get('/articles', 'Api\ArticlesController@allArticles');
Route::get('/article/{id}', 'Api\ArticlesController@singleArticle');
});
Of course, I need to log in, or I can't see the protected routes. I made an AuthController and inside that a controller login function.
Controller
public function login(Request $request)
{
$http = new \GuzzleHttp\Client;
try {
$response = $http->post(config('services.passport.login_endpoint'), [
'form_params' => [
'grant_type' => 'password',
'client_id' => config('services.passport.client_id'),
'client_secret' => config('services.passport.client_secret'),
'username' => $request->email,
'password' => $request->password,
]
]);
return $response->getBody();
} catch (\GuzzleHttp\Exception\BadResponseException $e) {
if ($e->getCode() === 400) {
return response()->json('Invalid Request. Please enter a username or a password.', $e->getCode());
}
if ($e->getCode() === 401) {
return response()->json('Your credentials are incorrect. Please try again', $e->getCode());
}
return response()->json('Something went wrong on the server.', $e->getCode());
}
}
In the frontend in my vuex, I have an action call.
retrieveToken(context, credentials){
return new Promise((resolve, reject) => {
axios.post("api/v1/login", {
email: credentials.username,
password: credentials.password,
})
.then(response => {
const token = response.data.access_token;
localStorage.setItem("access_token", token);
context.commit("retrieveToken", token);
resolve(resolve);
})
.catch(error => {
console.log(error);
reject(response);
})
})
},
Everything is fine. I store the token and use that for the login and delete it for the log out. But at the backend, something is missing. Because even if login, I still can't see the protected routes. Laravel's Auth doesn't know that user logged in.
Where should I put the token into the header? Inside the controller or login method? Or do I need to do something else?
回答1:
Also logged in user seeing pages only auth user can see.
How are you doing this? If the user can see what auth user can see, which means you are making GET request with auth token right? If you're using a passport, you should put the token into your Authorization header.
axios.defaults.headers.common.Authorization = `Bearer ${token}`;
Use this to put the token into your all axios request after you have login, then you should be good to go.
回答2:
In Login Component use
methods: {
login() {
var instance = axios.create({
baseURL: "http://apiendpoint.com/api/"
});
instance
.post("/admin-login", {
email: this.username,
password: this.password,
device_type: "Web",
device_token: "Web"
})
.then(response => {
// console.log(response);
localStorage.setItem("token", response.data.data.token);
this.$router.push("/");
})
.catch(error => {
console.log(error);
});
}
},
Then define the axios configuration in a file as Repository.js which can be used with all resources.
/******************** Repository js ****************/
import axios from "axios";
import router from "./router";
const baseDomain = "http://tetragolf-api.cubettech.in";
const baseURL = `${baseDomain}/api`;
const api = axios.create({
baseURL, // headers: {
// 'Authorization': 'Bearer ' + localStorage.getItem('api_token')
// },
validateStatus: function(status) {
if (status == 401) {
router.push("/login");
} else {
return status;
}
}
});
api.interceptors.request.use(
function(config) {
const token = localStorage.getItem("token");
if (token == null) {
console.log("Token Is empty");
console.log("Redirecting to Login");
router.push({ name: "login" });
}
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
function(response) {
return response;
console.log(response);
},
function(error) {
console.log(error);
return error;
}
);
// Add a response interceptor
api.interceptors.response.use(
function(response) {
// Do something with response data
return response;
},
function(error) {
// Do something with response error
console.log("Error Found");
return Promise.reject(error);
}
);
export default api;
And define all vue routes in Router.
回答3:
If you are simply Consuming your api with javascript I would suggest adding the CreateFreshApiToken middleware to your web middleware group.
From the docs:
'web' => [
// Other middleware...
\Laravel\Passport\Http\Middleware\CreateFreshApiToken::class,
],
Otherwise, as others have stated, make sure to include the Authorization header and Content-Type header in your request.
回答4:
If you using authentication by token with laravel passport always be sure you set the authentication header (for any client call) Authorization = Bearer your_token for protected routes, when call it from client. I make a simple auth example with Laravel Passport and Vue.js and uploaded it to github please check it out on this link.I also recommend to you read this post
Your login in Laravel should looks like this
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);
}
my laravel routes, 'middleware' => ['json.response'], I use to force json all the datas
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');
});
});
my guards in config/auth.php
'guards' => [
'web' => [
'driver' => 'session',
'provider' => 'users',
],
'api' => [
'driver' => 'passport',
'provider' => 'users',
],
],
then in vue you can use vuex for store the token and the user data for reuse it 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')
},
}
});
Note I set the token axios.defaults.headers.common.Authorization = 'Bearer ${state.token}'; on every axios call (protected routes), but you can do this globally once.
Login method in 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);
});
}
}
When you make call to the protected routes by 'auth:api' first of all you need to set the token in the header to get access to resources. In axios is axios.defaults.headers.common.Authorization = 'Bearer ${state.token}';.
来源：https://stackoverflow.com/questions/56590953/laravel-passport-middleware-protected-routes-unauthenticated-problem