Laravel+Vue 前后端分离

[linkbg]

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

---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");

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

[airycanon]

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]

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

[branchzero]

你确定走了 api 的 middleware 了么，如果走 api 的 middleware 的话默认是不会启用 csrf check 的

[linkbg]

@branchzero 谢谢。但是新的问题是 401 但是我明明已经取得客户端授权了。请问这个怎么解决呢？我将新的情况补充在问题上。

[ydxred]

分离不是应该写在视图里面吗?

[linkbg]

@ydxred 视图这里完全交给 vue 。 laravel 的视图就不去写了。

[coooooooode]

和我想的一样，前端就只做前端的事，让 vue 控制数据与 api 调用。 支持!

[jellybool]

我觉得你阔以看看这个

[jellybool]

硬广 https://www.laravist.com/series/build-a-zhihu-website-with-laravel

Laravel + Vuejs 实战开发知乎

[benbenlang]

@jellybool 你的视频要付费啊，，，

[jellybool]

@benbenlang 是的

[skyjerry]

@jellybool 出示学生证可否优惠？学生，没什么钱

[jellybool]

@skyjerry 这个暂时没有，不好意思

[linkbg]

@jellybool 价格有点小贵了。但是能分享一下，您是这样写的吗？我新的附言。

[sobigfish]

https://laracasts.com/series/learn-vue-2-step-by-step

FREE

[linoder]

都分离了 csrf 还有用么？

[linkbg]

scrf 没有用了。是传入 access_token 。

[linkbg]

scrf 没有用了。是传入 access_token 。

@linoder

[yangqi]

都前后端分离了，直接把 csrf 的 middleware 关掉就行了

[crossmaya]

一看就是 auth 中间件的问题！