如何在Laravel中对Vue.js / Axios请求进行身份验证
我在Laravel 5.6。我构建了所有的API路由，并正确响应来自REST客户端(Paw)的请求。我正在尝试构建一个简单的前端来访问这些路由。
我试图尽可能多地使用Laravel的开箱即用功能，所以我使用Axios从使用Vue.js的刀片模板调用这些路由。如果我在测试路由上禁用了auth中间件，它就会起作用，但是当为路由启用auth中间件时，我在控制台上会得到401个错误。
问题似乎很明显..。我的/api路由上的auth:api守卫希望在报头中看到oauth令牌，但当我使用网页登录时，它会执行会话身份验证。我假设有一种简单的方法来解决这个问题，而不必在web前端欺骗oauth令牌请求，对吧？我是否需要以某种方式在Axios的请求中传递会话令牌？如果是这样的话，我是否还需要更改我的API路由文件中的auth:api防护？
回答 3
Stack Overflow用户
发布于 2018-05-07 08:02:27
我解决了！我有点尴尬，因为答案实际上在Laravel文档中，但我会说，我在这里发布问题之前尝试过这个方法，但它不起作用。也许当时还有别的东西坏了。
您需要做的就是将
CreateFreshApiToken中间件添加到app/Http/Kernel.php文件中的web中间件组中：
‘'web’=> //其他中间件...\Laravel\Passport\Http\Middleware\CreateFreshApiToken::class，，
此Passport中间件会将laravel_token cookie附加到您的传出响应。此cookie包含一个加密的JWT，Passport将使用它对来自JavaScript应用程序的应用编程接口请求进行身份验证。现在，您可以向应用程序的应用程序接口发出请求，而无需显式传递访问令牌...
Stack Overflow用户
发布于 2018-05-06 09:30:29
您可能希望使用Larvel Passport或JWT身份验证机制来获取Authorization令牌。
考虑到如何使用axios，添加一个请求拦截器，以便在成功进行身份验证后将访问令牌附加到每个请求。一个简单的例子：
// Add a request interceptor
axios.interceptors.request.use(function (config) {
// assume your access token is stored in local storage
// (it should really be somewhere more secure but I digress for simplicity)
let token = localStorage.getItem('access_token')
if (token) {
config.headers['Authorization'] = `Bearer ${token}`
}
return config;
}, function (error) {
// Do something with request error
return Promise.reject(error);
});Stack Overflow用户
发布于 2020-07-17 18:24:12
要首先使用auth:api，需要在users表中使用api_token
Schema::table('users', function ($table) {
$table->string('api_token', 80)->after('password')
->unique()
->nullable()
->default(null);
});您还可以创建用于测试的用户，如下所示
User::create([
'name' => $data['name'],
'email' => $data['email'],
'password' => Hash::make($data['password']),
'api_token' => Str::random(60),
]);在您的布局中，在@yield('content')之前使用以下内容
<script>
window.Laravel = <?php echo json_encode(['api_token' => (Auth::user())->api_token]); ?>
</script>现在，您可以在vue js中使用window.laravel.api_token在头部中使用它。
这里有一个例子
var methods = new Vue({
el: '#tabs_lists',
data: {
config: {
headers: {
Authorization: 'Bearer ' + window.Laravel.api_token,
Accept: 'application/json'
}
},
data: []
},
methods: {
test: function (link) {
axios.get(link, this.config)
.then(response => (this.data = response.data)).catch(function (error) {
// handle error
console.log(error);
});
}
}
}
)https://stackoverflow.com/questions/50193349
复制相似问题
腾讯云开发者
