Laravel 5.4无法使用laravel passport从vue.js获取Post方法

时间:2017-05-31 07:17:42

标签: laravel laravel-5 vue.js vuejs2 laravel-passport

我尝试使用laravel作为后端和vue.js作为前端进行用户身份验证,并且在添加cors中间件后,laravel仍然没有获得发布请求来自vue.js(适用于获取请求)。

我使用护照进行身份验证,并在控制台上使用  a 404 error... 我实现了vue.resource,cors和passport(因为我有数据库生成的表和护照实现的新路由)应该这样做,但是如果有一些我没有在这里上传的代码那么可能有助于解决这个问题,请随时询问。

以下是vue组件的代码......

Main.js:

import Vue from 'vue'
import App from './App.vue'
import Router from './routes.js'

import VueResource from 'vue-resource'

Vue.use(VueResource)

new Vue({
    el: '#app',
    render: h => h(App),
    router: Router
})

App.vue:

<template>
  <div class="container" id="app">
    <bar></bar>
    <router-view></router-view>
  </div>
</template>

<script>
  import bar from './components/bar.vue'
  var App = {
      csrfToken: "{{ csrf_token() }}"
  }
  export default {
    components: {
      'bar': bar,
    }
  }
</script>

<style>

...

</style>

login.vue(这是post方法):

<template>
    <div class="container">

  <div class="row" id="pwd-container">
    <div class="col-md-4"></div>

    <div class="col-md-4">

      <section class="login-form">

        <form method="post" action=# role="login">
          <input v-model="email" type="email" name="email" placeholder="Email" required class="form-control input-lg" value="joestudent@gmail.com" />

          <input v-model="password" type="password" class="form-control input-lg" id="password" placeholder="Password" required="" />


          <div class="pwstrength_viewport_progress"></div>

          <!--type="submit"-->
          <button @click="login" type="submit" name="go" class="btn btn-lg btn-primary btn-block">Sign in</button>
          <div>
            <a href="#">Create account</a> or <a href="#">reset password</a>
          </div>

        </form>

        <div class="form-links">
          <a href="#">www.website.com</a>
        </div>
      </section>  
      </div>

      <div class="col-md-4"></div>


  </div>
</div>
</template>

<script>


    export default {
        data(){
            return {
                email: '',
                password: ''
            }
        },
        methods: {
            login(){
                var data = {
                    grant_type: 'password',
                    client_id: 2,
                    client_secret: '1NB8ybcjuc1nOp70uwhJ7KygaK0AdsUHzroQuH7M',
                    username: this.email,
                    password: this.password,
                    scope: ''
                }

                this.$http.post('http://localhost:8000/oauth/token', data)
                    .then(response =>{
                        console.log(response.data)
                    })
                    .catch(response =>{
                       // Error array
                    })


            }
        }
    }

</script>

<style>

</style>

0 个答案:

没有答案