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

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

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

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

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

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.

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

Спасибо


nginx vue.js vue-router openid-connect oidc-client-js
person mmbrian    schedule 26.02.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Как я и подозревал ранее, проблема на самом деле заключалась в неправильной настройке части 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). Другим решением является использование "Шаблон переднего контроллера" спроектируйте и передайте полный uri с его аргументами в SPA. Это по-прежнему требует настройки nginx немного по-другому, например

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

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

person mmbrian    schedule 27.02.2019