У меня есть приложение Laravel, и я использую vue.js и vue-authenticate, чтобы войти в систему под своей учетной записью Microsoft. Приложение vue.js живет по маршруту laravel, а не домашней странице Laravel, т. Е. Если маршрут домашней страницы - /, то маршрут vueapp - / vueapp.
На домашней странице vueapp у меня настроена кнопка «Войти через Microsoft». В моем приложении vue базовый URL-адрес установлен в mydomain / vueapp. Я могу успешно авторизовать приложение под своей учетной записью Microsoft, но затем вместо сообщения об успехе и токена я вижу следующую ошибку:
Ошибка: запрос не выполнен с кодом состояния 405
У меня установлены Axios и Vuex, и мои маршруты vue поддерживаются в режиме хеширования вместо истории из-за какой-то странной проблемы с laravel.
Обновление: я вижу похожую проблему с Google. Похоже, что-то происходит, когда URI перенаправлен.
Обновление: ниже мой код:
Для моего компонента:
<script>
import store from '../store'
import axios from 'axios'
export default{
data () {
return {
}
},
methods: {
authenticate: function (provider) {
console.log("Login Started" + provider);
this.$auth.authenticate(provider).then((response) => {
console.log("Login Successful " + response);
}).catch(error => {
console.log("error occured ");
console.log(error);
})
}
},
}
</script>
Мой HTML ---
auth Live
auth Google
В моем app.js
import Vue from 'vue'
import lodash from 'lodash'
import VueLodash from 'vue-lodash'
import VueAxios from 'vue-axios'
import VueAuthenticate from 'vue-authenticate'
import Vuex from 'vuex'
import App from './App.vue'
import router from './router'
import axios from 'axios'
Vue.use(VueLodash, lodash)
Vue.use(require('vue-moment'));
import vmodal from 'vue-js-modal'
Vue.use(vmodal, {
dialog: true,
dynamic: true,
})
import Toasted from 'vue-toasted';
Vue.use(Toasted, 'top-center')
Vue.use(VueAxios, axios)
Vue.use(Vuex)
import VueAuthenticate from 'vue-authenticate'
Vue.use(VueAuthenticate, {
baseUrl: 'https://www.mywebsite.com', // Your API domain
providers: {
live: {
clientId: 'My Mcirosoft key',
redirectUri: 'https://www.mywebsite.com/auth/live' // Your client app URL
},
google: {
clientId: 'mygooglekey.apps.googleusercontent.com',
redirectUri: 'https://www.mywebsite.com/auth/google'
}
}
})
В Laravel - у меня есть следующие маршруты. Webapp - это папка, в которой находится приложение vue, и оно использует режим хеширования для маршрутизации, а не для истории.
Route::get('webapp/{path?}', function () {
return View::make('app');
})->where( 'path', '([A-z\d-\/_.]+)?' );
Route::get('auth/live', function () {
return View::make('app');
});
Route::get('auth/google', function () {
return View::make('app');
});