php - 在 Vue 中使用 LoginController.php

Question

我正在使用 Vue 和 Laravel。在 Jwt-auth 之前，我一直遵循这些说明（https://codeburst.io/api-authentication-in-laravel-vue-spa-using-jwt-auth-d8251b3632e0 ）。

截至目前，/login如果我尝试去任何auth: true路线，我都会被引导。当我使用不正确的凭据并单击登录时，它不会尝试重定向，这很好，但是当我输入正确的凭据时，它会尝试定向到/LoginController 中指定的位置，但它会/login在一秒钟后返回。我认为它正在auth: true通过/我拥有的路线看到，并且不知何故没有看到我被授权。我将如何解决这个问题？我如何确保auth: true满意并坚持整个浏览器？

App.js 

/** 

* First we will load all of this project's JavaScript dependencies which 

* includes Vue and other libraries. It is a great starting point when 

* building robust, powerful web applications using Vue and Laravel. 

*/




require('./bootstrap');




window.Vue = require('vue');




import Vuetify from 'vuetify'

import VueRouter from 'vue-router'

import axios from 'axios'

import VueAxios from 'vue-axios'


import Home from './components/home.vue';

import Users from './components/users.vue';

import Logs from './components/logs.vue';

import Settings from './components/settings.vue';

import Login from './components/login.vue';

import Google from './components/google.vue';


Vue.use(Vuetify)

Vue.use(VueRouter)

Vue.use(VueAxios, axios)


const routes = [

    {

        title: 'Home',

        icon: 'home',

        name: 'google',

        path: '/',

        component: Google,

        meta: {

            auth: true
        },

        children:

            [

                {

                    path: 'welcome',

                    name: 'welcome',

                    component: Home,

                    meta: {

                        auth: true
                    }

                },

                {

                    path: 'users',

                    name: 'users',

                    component: Users,

                    meta: {

                        auth: true
                    },

                },

                {

                    path: 'logs',

                    name: 'logs',

                    component: Logs,

                    meta: {

                        auth: true
                    }

                },

                {

                    path: 'settings',

                    name: 'settings',

                    component: Settings,

                    meta: {

                        auth: true
                    }

                },

            ]

    },

    {

        title: 'Login',

        icon: 'home',

        path: '/login',

        name: 'signin',

        component: Login,

        meta: {

            auth: false
        }

    }

]

const router = new VueRouter({

    routes: routes,

    linkActiveClass: 'list_tile--active',

    mode: 'history',

});


Vue.router = router
Vue.use(require('@websanova/vue-auth'), {
    auth: require('@websanova/vue-auth/drivers/auth/bearer.js'),
    http: require('@websanova/vue-auth/drivers/http/axios.1.x.js'),
    router: require('@websanova/vue-auth/drivers/router/vue-router.2.x.js'),
 });



/** 

* Next, we will create a fresh Vue application instance and attach it to 

* the page. Then, you may begin adding components to this application 

* or customize the JavaScript scaffolding to fit your unique needs. 

*/



const app = new Vue({

    el: '#app',

    components: {

        google: require('./components/google.vue')

    },

    data() {

        return {

            routes: routes,

        }

    },

    router,

});

这是我的 Login.vue

<template>
  <v-app id="inspire">
    <v-content>
      <v-container fluid fill-height>
        <v-layout align-center justify-center>
          <v-flex xs12 sm8 md4>
            <v-card class="elevation-12">
              <v-toolbar dark color="primary">
                <v-toolbar-title>Login form</v-toolbar-title>
                <v-spacer></v-spacer>
                <v-tooltip bottom>
                  <v-btn
                    slot="activator"
                    :href="source"
                    icon
                    large
                    target="_blank"
                  >
                    <v-icon large>code</v-icon>
                  </v-btn>
                  <span>Source</span>
                </v-tooltip>
                <v-tooltip right>
                  <v-btn slot="activator" icon large href="https://codepen.io/johnjleider/pen/wyYVVj" target="_blank">
                    <v-icon large>mdi-codepen</v-icon>
                  </v-btn>
                  <span>Codepen</span>
                </v-tooltip>
              </v-toolbar>
              <v-card-text>
                <v-form>
                  <v-text-field prepend-icon="person" v-model="login.email" name="email" label="Email" type="text" required></v-text-field>
                  <v-text-field id="password" v-model="login.password" prepend-icon="lock" name="password" label="Password" type="password" required></v-text-field>
                </v-form>
              </v-card-text>
              <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="primary" @click='sendCredentials'>Login</v-btn>
              </v-card-actions>
            </v-card>
          </v-flex>
        </v-layout>
      </v-container>
    </v-content>
  </v-app>
</template>

<script>
  export default {
      data: function () {
        return {
          login:{
            email:"",
            password:""
          }
        }  
      },
    props: {
      source: String
    },
    methods: {
      sendCredentials: function () {  
        axios.post('/login', this.login)
        .then((response)  =>  {

          console.log(response)
          this.$router.go('/');

        })
        .catch(error => {
            console.log(error)
        });
      }
    }
  }
</script>

标签： phplaravelvue.jsvuetify.js