Laravel+Vue 前后端分离

This topic created in 3398 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 中间件了。