带有 Laravel 5.4 后端的 Vuejs 2,发布(未经授权)错误
Posted
技术标签:
【中文标题】带有 Laravel 5.4 后端的 Vuejs 2,发布(未经授权)错误【英文标题】:Vuejs 2 with Laravel 5.4 backend, post (Unauthorized) error 【发布时间】:2017-10-27 13:30:35 【问题描述】:我正在学习 Vuejs 2,并构建一个用于娱乐和测试的客户目录应用程序,Laravel 5.4 作为后端 (api) 以及 Cors 和 Passport 包。和 Vuejs 作为 vue-router 和 axios 的前端我能够登录并将令牌存储在 cookie 中我得到所有客户而没有任何错误,但是当我尝试创建新客户时,我在控制台中收到以下错误在网络 "error":"Unauthenticated." 中发布 http://localhost:8000/api/customer401(未授权)。如果我评论 auth:api 中间件,我可以毫无错误地发布。
routes/api.php
Route::get('/', 'CustomerCtrl@index');
Route::get('customer/id', 'CustomerCtrl@show');
Route::post('customer', 'CustomerCtrl@store');
Route::delete('customer/id', 'CustomerCtrl@destroy');
Route::put('customer/id', 'CustomerCtrl@update');
CustomerCtrl.php
<?php
namespace App\Http\Controllers;
use App\Customer;
use Illuminate\Http\Request;
class CustomerCtrl extends Controller
public function __construct()
$this->middleware('auth:api');
public function index()
return response()->json(Customer::all(), 200);
public function show($id)
return response()->json(Customer::findOrFail($id), 200);
public function store(Request $request)
$this->validate($request, [
'first_name' => 'required',
'last_name' => 'required',
'email' => 'required|email',
'phone' => 'required',
'address' => 'required',
'country' => 'required',
]);
Customer::create($request->all());
return response()->json('Customer Created', 200);
public function update(Request $request, $id)
$this->validate($request, [
'first_name' => 'required',
'last_name' => 'required',
'email' => 'required|email',
'phone' => 'required',
'address' => 'required',
'country' => 'required',
]);
$customer = Customer::findOrFail($id);
$customer->update($request->all());
return response()->json('Customer Updated', 200);
public function destroy(Request $request, $id)
$customer = Customer::findOrFail($id);
$customer->forceDelete();
return response()->json('Customer Deleted', 200);
新客户组件 (vuejs)
<template>
<div class="add-customer">
<h1 class="page-header">Add Customer</h1>
<div v-if="isErrors" class="alert alert-danger">
<ul>
<li v-for="error in errors">
error[0]
</li>
</ul>
</div>
<form @submit.prevent>
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" id="firstName" v-model="first_name" class="form-control">
</div>
<div class="form-group">
<label for="lastName">Last Name</label>
<input type="text" id="lastName" v-model="last_name" class="form-control">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="text" id="email" v-model="email" class="form-control">
</div>
<div class="form-group">
<label for="Phone">Phone</label>
<input type="text" id="Phone" v-model="phone" class="form-control">
</div>
<div class="form-group">
<label for="country">Country</label>
<input type="text" id="country" v-model="country" class="form-control">
</div>
<div class="form-group">
<label for="address">Adress</label>
<textarea type="text" id="address" v-model="address" class="form-control" rows="3"></textarea>
</div>
<div class="form-group">
<button @click.prevent="addCustomer" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</template>
<script>
export default
name: 'add-customer',
data()
return
first_name: '',
last_name: '',
address: '',
phone: '',
country: '',
email: '',
errors: ,
isErrors: false
,
head:
title:
inner: 'Add Customer'
,
,
methods:
addCustomer()
this.$http.post('http://localhost:8000/api/customer',
headers:
'Authorization':'Bearer ' + this.$cookie.get('token')
,
first_name: this.first_name,
last_name: this.last_name,
address: this.address,
phone: this.phone,
country: this.country,
email: this.email
).then(res =>
console.log(res);
this.$router.push(
name: 'Customers'
)
).catch(res =>
this.isErrors = true;
this.errors = res.response.data;
console.log(res);
);
</script>
<style scoped>
</style>
Login.vue 组件
methods:
login()
const data =
client_id: 4,
client_secret: '55bC4Ud1ariLqnHSk1fxKiKHF8FDI8NTWHR5d13k',
grant_type: 'password',
username: this.email,
password: this.password
this.$http.post('http://localhost:8000/oauth/token/', data).then(res =>
console.log(res);
this.$cookie.set('api_token', res.data.access_token, 1);
this.$router.push(
name: 'Customers'
)
).catch(res =>
this.isErrors = true;
this.errors = res.response.data;
console.log(res);
);
【问题讨论】:
【参考方案1】:已解决 :) 通过在 main.js (Vue) 中定义默认 axios baseurl 和 headers。
main.js
axios.defaults.baseURL = 'http://localhost:8000/api';
axios.defaults.headers.common['Authorization'] = "Bearer " +
VueCookie.get('api_token');
并删除所有组件中的所有本地定义的标头。
【讨论】:
将应用程序部署到主机时应该怎么做?与axios
通话至htt://localhost:8000/
?我应该像这样更改链接吗?
@КамиловТимур 是的,您应该更改链接。将donenv package 用于不同的环境。
我在后端使用Laravel 5.4
,并在数据库中使用mysql
。我应该如何更改 API 链接?【参考方案2】:
使用 xsrf 令牌或将以下内容添加到 api/app/Http/Middleware/VerifyCsrfToken.php
protected $except = [
'customer',
'customer/*'
'customer/*'
];
这将禁用 xsrf 令牌。请谨慎使用。
【讨论】:
我不认为这个实现是正确的,它只是因为你删除了该路由的所有 CSRF 令牌验证,这反过来又打开了 XSS 的 OPs 代码,如果他的下一个 POST 请求会上传文件,而不是 $user 自己的上传,在头像中会很麻烦,但在更重要的东西上,比如加密货币应用程序,那将是可怕的。 @clusterBuddy 你是 110% 正确的。这不是做事的首选方式。最好使用 XSRF 令牌。以上是关于带有 Laravel 5.4 后端的 Vuejs 2,发布(未经授权)错误的主要内容,如果未能解决你的问题,请参考以下文章
在 laravel 5.4 + vueJS 中处理表单验证错误
undefined:1 SyntaxError: Unexpected token in Laravel 5.4 and Vuejs