我正在使用Laravel Passport进行身份验证,因此我将我的路由设置为中间件保护。
为了说清楚,我也在添加UsersController。
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');
});
当然,我需要登录,否则我看不到受保护的路线。 我制作了一个AuthController
,里面有一个控制器登录功能。
调节器
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());
}
}
在我的vuex的前端,我有一个动作电话。
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);
})
})
},
一切都好。 我存储令牌并将其用于登录并删除它以进行注销。 但在后端,缺少一些东西。 因为即使登录,我仍然看不到受保护的路线。 Laravel的Auth不知道该用户已登录。
我应该在哪里将令牌放入标题? 在控制器或登录方法内? 或者我还需要做其他事情吗?
还登录用户只看到auth用户看到的页面。
你好吗? 如果用户可以看到auth用户可以看到的内容,这意味着您正在使用auth令牌进行GET
请求吗? 如果您使用的是护照,则应将令牌放入Authorization标头中。
axios.defaults.headers.common.Authorization = `Bearer ${token}`;
在您登录后使用此标记将令牌放入您的所有axios请求中,那么您应该好好去。
在登录组件使用中
methods: {
login() {
var instance = axios.create({
baseURL: "http://tetragolf-api.cubettech.in/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);
});
}
},
然后将文件中的axios配置定义为Repository.js,可以与所有资源一起使用。
/******************** 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;
并在Router中定义所有vue路由。
如果您只是使用javascript使用api,我建议将CreateFreshApiToken
中间件添加到您的Web中间件组。
来自文档:
'web' => [
// Other middleware...
\Laravel\Passport\Http\Middleware\CreateFreshApiToken::class,
],
否则,正如其他人所说,请确保在请求中包含Authorization标头和Content-Type标头。
如果您使用带有laravel passport的令牌进行身份验证,请始终确保设置身份验证标头(对于任何客户端调用) Authorization = Bearer your_token
用于受保护路由,从客户端调用它时。 我用Laravel Passport和Vue.js做了一个简单的auth示例并将其上传到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);
}
我的laravel路线, '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}';
。