2

我有一个在 Vue.js 2.5 中构建的单页应用程序，它还使用 IdentityServer4 + vuex-oidc 支持 OAuth2.0，并在 nginx 服务器上运行。在 webpack dev server上运行应用程序时，我的设置一切正常，但发布版本存在重定向循环问题，我高度怀疑这可能是由于 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 问题，我不确定提供我的代码/设置的其他部分是否会有所帮助，但请让我知道，以防我遗漏了什么，我会分享更多。

谢谢

4

1 回答 1

1

正如我之前所怀疑的，问题实际上是 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查询类似于此处提出的查询。

于 2019-02-27T22:54:34.807 回答