Vue/Vite 路由器有 /#/ 它不适用于 Oauth 流回调 URL

Question

所以我很确定这很容易，但我是Vite的新手，我还没有找到合适的组合。我所有这些都在Vue Cli 3工作，但我想让它在Vite工作。

我使用Vue路由器4.0.0和Vue 3.2.25以及Vite和Okta作为我的Oauth提供商。我在http://localhost:8080/login/callback的Okta中有一个登录重定向URI。当我启动我的登录流时，它重定向到CCD_/"而不是我的"LoginCallback"路由/登录/回叫"；。我很确定这是个骗局。我试过各种各样的组合，但还没有找到合适的组合。

这是我的路由器。

import { createRouter, createWebHashHistory } from "vue-router";
import { LoginCallback, navigationGuard } from "@okta/okta-vue";
import Home from "../views/Home.vue";
import User from "../views/User.vue";
import Profile from "@/components/Profile.vue";
const routes = [
{
path: "/",
name: "Home",
component: Home,
},
{
path: "/login/callback",
component: LoginCallback,
},
{
path: "/user",
name: "User",
component: User,
meta: {
requiresAuth: true,
},
},
{
path: "/profile",
component: Profile,
meta: {
requiresAuth: true,
},
},
];
console.log("base = " + import.meta.env.BASE_URL);
const router = createRouter({
mode: "history",
history: createWebHashHistory(import.meta.env.BASE_URL),
hash: false,
routes,
});
router.beforeEach(navigationGuard);
export default router;

这是我的vite.config.js

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
export default defineConfig({
base: "http://localhost:8080/",
server: {
port: 3030,
},
preview: {
port: 8080,
},
plugins: [vue()],
resolve: {
alias: [
{ find: "@", replacement: path.resolve(__dirname, "./src") },
{
// I got this from https://github.com/okta/okta-auth-js/issues/641
find: "@okta/okta-auth-js",
replacement: require.resolve(
"@okta/okta-auth-js/dist/okta-auth-js.umd.js"
),
},
{ find: "@config", replacement: path.resolve(__dirname, "./src/config") },
],
},
});

Answer 1

我相信用"@okta/okta-auth-js/dist/okta-auth-js.umd.js"替换"@okta/okta-auth-js"不需要更多别名，因为这个问题在最新版本的Okta Vue SDK中已经修复。

由于5.x版本，您需要安装@okta/okta-auth-js作为依赖项。在这里，您可以找到有关迁移的更多信息。