Реализация закрытии окна и обновление контента

Question

как можно реализовать подобную штуку? Объясню, при нажатии на кнопку открывается окно отдельное и проходит авторизация через oauth2, после этого окно закрывается и контент на странице обновляется.

Answer 1

Основная логика заключается в том, чтобы создать в вкладке дополнительное окно через метод window.open , заданное окно перейдет по указанной ссылке и начнет авторизацию на серверной части. Серверная часть в свою очередь использует passportjs и готовую авторизацию для VK, после успешной авторизации идет переадресация на /callback урл и отдает html контент с js скриптом, который при наличии родительского окна передает JWT Token для авторизации запросов к АПИ на фронт приложение.

На фронте слушается событие window.onmessage и при поступлении в него сообщения выполняется запись в Store и в дальнейшем localStorage .

Вырвал из готового проекта кусок кода который полностью выполняет логику вашей задачи:

Vue Front:

<script>
import { mapActions, mapGetters } from 'vuex';
export default {
    data: () => ({
        window: Object,
        passwordShowState: false
    }),
    computed: {
        ...mapGetters(['loggedIn'])
    },
    mounted() {
        window.addEventListener('message', this.receiveMessage, false);
    },
    beforeDestroy() {
        window.removeEventListener('message', this.receiveMessage, false);
    },
    methods: {
        ...mapActions(['setToken', 'setLoggedIn', 'setUsername']),
        togglePasswordShowState() {
            this.passwordShowState = !this.passwordShowState;
        },
        loginWithTelegram() {
            this.login('telegram');
        },
        loginWithVkontakte() {
            this.login('vkontakte');
        },
        login(path) {
            const params = 'width=480,height=700';
            const baseUrl = process.env.VUE_APP_BASE_URL + process.env.VUE_APP_API_PATH;
            this.window = window.open(`${baseUrl}/auth/${path}`, '', params);
        },
        receiveMessage(message) {
            if (typeof message !== 'object') return;
            if (!message['data']) return;
            if (!message.data['token']) return;
            this.setToken(message.data.token);
            this.setLoggedIn(true);
            this.$router.push({ name: 'dashboard' });
        }
    }
};
</script>

Nodejs Back:

import express from 'express';
import passport from 'passport';
import generateAccessToken from '@utils/generateAccessToken';

const router = express.Router();

const vkontakteMiddleware = passport.authenticate('vkontakte');

router.get('/', vkontakteMiddleware);
router.get('/callback', vkontakteMiddleware, async (req, res) => {
    const token = generateAccessToken({
        id: req.user.id,
        name: req.user.name,
        role: req.user.role,
    });
    res.render('authenticated', { token });
});

export default router;

Шаблон authenticated.ejs:

<!DOCTYPE html>
<html>
    <head>
        <title>Authenticated</title>
    </head>
    <body>
        Authenticated successfully.

        <script type="text/javascript">
            if (window.opener !== null) {
                window.opener.postMessage({ token: '<%= token %>' }, '*');
                window.close();
            }
        </script>
    </body>
</html>

Используемый стек технологий:

Vuejs, Vuex, Vue router
Nodejs
Passportjs, JWT
Sequelize
Express, Ejs

БЛОГ НА HUSL

Реализация закрытии окна и обновление контента

Ответы (1 шт):