在 Netlify 上部署 Vue.js Okta 身份验证应用程序

Question

我最近使用 Okta 身份验证构建了一个 Vue.js 应用程序。我正在尝试在 Netlify 上部署此应用程序。在 Netlify 中设置新项目后，我将 Vue.js 应用程序从 GitHub 导入到 Netlify 项目中。我在应用程序中重新配置了路由器，以便redirect_uri在 Okta 初始化程序中反映新的 Netlify URL：

import Auth from "@okta/okta-vue";

Vue.use(Auth, {
  issuer: "https://xxx-xxxxxx.okta.com/oauth2/default",
  client_id: "xxxxxxxxxxxxxxxxxxxx",
  redirect_uri: "https://xxxxxxxxx-xxxx-xxxxxx.netlify.com/implicit/callback",
  scope: "openid profile email"
});

部署应用程序并单击登录按钮后，我应该被重定向到默认的 Okta 登录页面。但是，我被重定向到一个页面，上面写着“找不到页面：看起来您访问了损坏的链接或输入了此网站上不存在的 URL。”

我什至确保在我的 Okta 仪表板中将该 URL 列入白名单。知道为什么 Netlify 无法识别新的 redirect_uri 吗？谢谢！

Answer 1

由于您正在部署 SPA，因此您需要将所有路由路由到您的index.html并让 Vue 处理它们。

根据这篇文章，您需要使用以下行将_redirects文件添加到publish目录中才能利用浏览器历史记录推送状态：

/*    /index.html   200

有关更多信息，请参阅Netlify 的文档。