Vue.js SPA с vuex-oidc имеет циклы перенаправления в версии выпуска - PullRequest
Новая
       66

Vue.js SPA с vuex-oidc имеет циклы перенаправления в версии выпуска

0 голосов
/ 26 февраля 2019

У меня есть одностраничное приложение, встроенное в Vue.js 2.5, которое также поддерживает OAuth2.0 с использованием IdentityServer4 + vuex-oidc и работает на сервере nginx.Все с моей настройкой работает нормально, когда запускает приложение на webpack dev server , но в версии выпуска есть проблема с циклом перенаправления, которая, я подозреваю, может быть связана с неправильной настройкой nginx.

Проблема: Поведение цикла перенаправления всегда одинаково

  1. Пользователь запрашивает навигацию к / app
  2. Плагин oidc перенаправляет на / connect /авторизировать? ...
  3. перенаправить в / app / oidc-login (uri перенаправления запроса авторизации)
  4. перенаправить в / app (вернуться к шагу 2)

Для сервера dev я использую обратный прокси, настроенный как 

location /app {
    fastcgi_buffer_size 128k;
    fastcgi_buffers 4 256k;
    fastcgi_busy_buffers_size 256k;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_pass https://127.0.0.1:55100;
    proxy_temp_path C:/myapp/nginxRP;
}

Но так как я использую режим истории в маршрутизаторе, версия выпуска настроена в соответствии с https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations

fastcgi_buffer_size 128k;
fastcgi_buffers 4 256k;
fastcgi_busy_buffers_size 256k;
location /app {
    try_files $uri $uri/ /index.html;
}

Где версия выпуска приложения (index.html и статические файлы) находится по адресу .. \ nginx \ html \ app

Вот моя конфигурация vue-router 

const router = new Router({
    mode: "history",
    base: "/app/",
    routes: [
        {
            path: "/oidc-login",
            name: "oidcCallback",
            component: OidcCallback,
            meta: {
                isOidcCallback: true,
                isPublic: true
            }
        },
        {
            path: "/oidc-silent-login",
            name: "oidcSilentCallback",
            component: OidcSilentCallback,
            meta: {
                isOidcCallback: false,
                isPublic: true
            }
        },
        {
            path: "/",
            name: HOME_PAGE_TITLE,
            component: Main
        },
        {
            path: "*",
            name: "Page Not Found",
            component: NotFound
        }
    ]
});

И компоненты OidcCallback 

<template>
  <div></div>
</template>

<script>
import { mapActions } from "vuex";
import { OIDC_MODULE_NAMESPACE } from "../../store/store";

export default {
    name: "OidcCallback",
    methods: {
        ...mapActions(OIDC_MODULE_NAMESPACE, [
            "oidcSignInCallback"
        ])
    },
    mounted () {
        this.oidcSignInCallback()
            .then((redirectPath) => {
                this.$router.push(redirectPath);
            })
            .catch((err) => {
                console.error(err);
                this.$router.push("/signin-oidc-error"); // TODO
            });
    }
};
</script>

Я настроил vuex-oidc в точности так, как указано в https://github.com/perarnborg/vuex-oidc/wiki#how-to-implement-vuex-oidc, за исключением того, что я динамически добавляю модуль oidcStore в vuex.

Так как на сервере dev все работает, и я уже думаю, что это проблема nginx, яне уверен, что другие части моего кода / настройки будут полезны, но, пожалуйста, дайте мне знать, если я что-то упустил, и я поделюсь с вами еще.

Спасибо

1 Ответ

0 голосов
/ 28 февраля 2019

Как я и подозревал ранее, проблема заключалась в неправильной настройке части nginx.в основном веб-сервер отбирал параметр id_token, возвращаемый из IdentityServer (и любые другие параметры запроса), что приводило к циклу перенаправления.Есть два решения этого.простое решение - добавить правило перезаписи в конфигурацию nginx и заменить его на что-то вроде 

location ^~ /app/ {
    if (!-f $request_filename) {
        rewrite ^/app/(.*)$ /app/index.html;
    }
}

, чтобы он правильно передавал каждый URL-запрос приложению Vue, которое затем обрабатывается Vue-Router иПромежуточное ПО vuex-oidc (не требуется никаких изменений при настройке vue-router, достаточно только вышеуказанной конфигурации nginx).Другое решение состоит в том, чтобы использовать «Шаблон Front Controller» и передавать полный URI с его аргументами в SPA.Это по-прежнему требует настройки nginx немного по-другому, как 

location /app {
    try_files $uri $uri/ /index.html?route=$uri&$args;
}

Больше не нужно переписывать, но дополнительно налагает особую обработку в Vue-Router для выполнения навигации оттуда с помощью навигационной защиты и этого запроса route, аналогичного тому, чтопредложенный здесь .

...