Я использую авторизацию Google oauth2 во всплывающем окне. Я пытаюсь выучить VueJS, поэтому следующий код может иметь проблемы (если вы заметите их, пожалуйста, будьте добры и назовите их)
Как скрыть кнопку Sign in with Google
, используя vue, когда авторизация завершена?
login.blade.php
<redirect-to-provider route="{{route('auth.scopes.redirect')}}" provider="google"></redirect-to-provider>
RedirectToProvider.vue
<template>
<button v-on:click="popUpRedirect" class="btn btn-primary">
Sign in with Google
</button>
</template>
<script>
export default {
props: {
route: {
required: true,
},
provider: {
required: true,
default: "google"
},
scopes: {
default: '',
},
},
mounted() {
console.log('Component mounted.')
},
methods: {
popUpRedirect: function () {
return window.open(
this.route+"?provider="+this.provider+'&scopes[]='+this.scopes, '_blank',
'toolbar=0,location=0,menubar=0'
);
}
}
}
</script>
callback.blade.php
<script>
window.onunload = function() {
var win = window.opener;
if (!win.closed) {
win.console.log('signed in successfully');
}
};
window.close();
</script>
Таким образом, компонент vue отображает кнопку. Я нажимаю на него, и всплывающее окно открывается и перенаправляет в Google. Я делаю авторизацию и возвращаю меня в callback.blade. php. Если пользователю предоставлены разрешения, я отправляю login.blade.php
консольное сообщение с signed in successfully
, а затем делаю window.close();
. Я могу скрыть кнопку, используя метод javascript вместо console.log('signed in successfully');
но я не могу понять, как использовать VueJS вместо.