Laravel+Vue 前后端分离

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

For Existing Member Sign In

This topic created in 3350 days ago, the information mentioned may be changed or developed.

目前实践一个项目。有些小问题。可能想法错了，还望大家指点一下。目录结构：

---vue-laravel | | ---- client #这是纯的 vue 目录 | ---- server #laravel 放在这里

laravel 提供 api 并且通过 CORS 解决跨域的问题。

目前认证这块是正常的。

但是我想把注册的模块也通过 vue 来实现页面展示， laravel 来存入数据库。但是，我使用 CORS 来提交数据会报 422 的错误。好像应该我没有把 CSRF 值传入的问题。

代码如下： vue 提交注册数据

handleRegisterFormSubmit () { const postData = { grant_type: 'client_credentials', client_id: clientId, client_secret: clientSecret, email: this.register.email, password: this.register.password, password_confirmation: this.register.password_confirmation, name: this.register.name, scope: '' } this.$http.post('http://localhost:8000/api/register', postData) .then(respOnse=> { console.log(response) }) }

laravel Api 路由：

Route::post('/register',"Auth\RegisterController@register");

请问应该怎么来处理种没有认证之前的前后端数据交互呢？谢谢

Supplement 1 Feb 22, 2017

 this.$http.post(loginUrl, postData) .then(respOnse=> { // 设置客户端认证 if (response.status === 200) { console.log(response) clientAuth.access_token = response.data.access_token window.localStorage.setItem('clientAuth', JSON.stringify(clientAuth)) } // 携带客户端认证信息和要post的数据 this.$http.post('http://127.0.0.1:8000/api/register', postDataRegister, {headers: getHeaderClient()}) .then(respOnse=> { console.log(response) }) })

header

 export const getHeaderClient = function () { const tokenData = JSON.parse(window.localStorage.getItem('clientAuth')) const headers = { 'Accept': 'application/json', 'Authorization': 'Bearer ' + tokenData.access_token, } return headers }

客户端认证成功，但是提交数据就401

Supplement 2 Feb 22, 2017

经过一下午反复思考，最终还是决绝了。但是如果laravel中register的validator如果出现，比如两个密码不一致或者密码长度小于6，反者就是这个验证过不了就会出现 422 (Unprocessable Entity)的错误。这一块准备在前端这边进行一个判断然后再post请求。

code如下：

 methods: { handleRegisterFormSubmit () { const postData = { grant_type: 'client_credentials', client_id: clientId, client_secret: clientSecret, scope: '' } const postDataRegister = { grant_type: 'client_credentials', client_id: clientId, client_secret: clientSecret, email: this.register.email, password: this.register.password, password_confirmation: this.register.password_confirmation, name: this.register.name, scope: '' } const clientAuth = {} this.$http.post(loginUrl, postData) // 获取客户端认证 .then(respOnse=> { if (response.status === 200) { console.log(response) clientAuth.access_token = response.data.access_token window.localStorage.setItem('clientAuth', JSON.stringify(clientAuth)) // 本地存储认证信息 } this.$http.post('http://127.0.0.1:8000/api/register', postDataRegister, {headers: getHeaderClient()}) .then(respOnse=> { console.log(response) // post请求创建 }) }) } }

一些常量：

export const apiDomain = 'http://localhost:8000/' export const loginUrl = apiDomain + 'oauth/token' export const userUrl = apiDomain + 'api/user'

总算解决了。

21 replies 2017-02-23 08:51:40 +08:00

airycanon

Feb 22, 2017

Laravel 5.4 里面用的是 axios 发请求，原理如下：

把变量传到页面中：
```
<script>
window.Laravel = {!! json_encode([
'csrfToken' => csrf_token(),
]) !!};
</script>
```
在 axios 的 header 中设置 csrfToken ：
```window.axios.defaults.headers.common = {
'X-CSRF-TOKEN': window.Laravel.csrfToken,
'X-Requested-With': 'XMLHttpRequest'
};
```
用 Vue 的话同理。

airycanon

Feb 22, 2017

不好意思，没看清是前后端分离，这样的话我只知道设置 CSRF 中间件的 $except ，可以排除掉某些路由，或者直接在 Http\Kernel.php 中禁用 CSRF 中间件了。