Question

我有一个内置Vue.js 2.5的单页应用程序，该应用程序还使用IdentityServer4 + vuex-oidc支持OAuth2.0，并在nginx服务器上运行。在Webpack dev服务器上运行应用程序时，所有设置都可以正常运行，但是发行版存在重定向循环问题，我高度怀疑这可能是由于nginx配置错误所致。

问题：重定向循环行为始终相同

用户请求导航到/ app
oidc插件重定向到/ connect / authorize？...
重定向到/ app / oidc-login（授权请求的重定向uri）
重定向到/ 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中进行了特殊处理，以使用导航保护和与此here类似的查询route从那里执行导航。

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

1 个答案: