带vuex-oidc的Vue.js SPA在发布版本上有重定向循环

Question

我有一个在Vue.js 2.5中构建的单页面应用程序，它也使用IdentityServer4 + vuex-oidc支持OAuth2.0并在nginx服务器上运行。在webpack 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>

我已经完全按照https://github.com/perarnborg/vuex-oidc/wiki#how-to-implement-vuex-oidc中的指示配置了vuex-oidc，除了我动态地将oidcStore模块添加到vuex。

由于一切都在开发服务器中工作，我已经认为这是一个nginx问题，我不确定提供我的代码/设置的其他部分会有所帮助，但请告诉我，以防我错过了什么，我'我会分享更多。

谢谢

Answer 1

正如我之前所怀疑的那样，问题实际上是对nginx部分的错误配置。基本上，Web服务器正在剥离从IdentityServer（以及任何其他查询参数）返回的id_token参数，这导致了重定向循环。这有两个解决方案。简单的解决方案是为nginx配置添加重写规则，并基本上用类似的东西替换它

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

因此它正确地将每个url查询传递给Vue应用程序，然后由Vue-Router和vuex-oidc中间件处理（设置vue-router时无需更改，只有上面的nginx配置就足够了）。另一种解决方案是使用"Front Controller Pattern"设计并将完整的uri与其参数传递给SPA。这仍然需要有点不同的配置nginx

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

没有更多的重写，但另外在Vue-Router中进行了特殊处理以使用导航防护来执行导航，并且这个route查询类似于提议的here。