Как использовать триггер метода javascript для вызова метода vuejs в блейде laravel - PullRequest
Новая
       26

Как использовать триггер метода javascript для вызова метода vuejs в блейде laravel

1 голос
/ 04 марта 2020

Я использую авторизацию 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 вместо.

...