iT邦幫忙

2

Azure 前端

  • 分享至 

  • xImage

我有兩個專案,前端和後端分架在Azure Web App和Azure Static Web App上,為什麼Login專案沒有staticwebapp.config.app也能正常運行,但是ActivityHub專案卻會回報404: Not Found?

當我直接訪問ActivityHub專案的ActivityHome.vue時,因為沒有登入,所以會直接跳轉到Login專案的path: "/",也就是HomePage,這是有正確做到的,但是我如果從Login專案的UserLoby.vue,訪問ActivityHub專案的ActivityHome.vue,網址是對的:https://我的網域.azurestaticapps.net/activityhome?lang=zh-TW,但是會回報 404 Not Found,直接訪問比較沒有跳轉邏輯的測試頁面:https://我的網域.azurestaticapps.net/testpage,也是回報404 Not Found,是為什麼呢?

Login project (router/index.js):
import { createRouter, createWebHistory } from "vue-router";
import HomePage from "../views/HomePage.vue";
import UserRegister from "../views/UserRegister.vue";
import UserLogin from "../views/UserLogin.vue";
import UserLobby from "../views/UserLobby.vue";
import { useAuthStore } from "@/store/auth";
import axios from "axios";
import i18n from "@/i18n";

// 定義應用路由
const routes = [
{ path: "/", component: HomePage },
{
path: "/userregister",
component: UserRegister,
meta: { requiresGuest: true },
},
{ path: "/userlogin", component: UserLogin },
{ path: "/userlobby", component: UserLobby, meta: { requiresAuth: true } },
];

// 創建路由實例
const router = createRouter({
history: createWebHistory(),
routes,
});

// 路由守衛:限制已登入用戶訪問特定頁面
router.beforeEach(async (to, from, next) => {
const authStore = useAuthStore();

// 檢查 URL 中的 lang 參數並同步語系
const urlParams = new URLSearchParams(to.query);
const urlLang = urlParams.get("lang");
const savedLocale = localStorage.getItem("locale") || "zh-TW";
const currentLocale = urlLang && ["zh-TW", "en"].includes(urlLang) ? urlLang : savedLocale;

// 同步到 localStorage 和 i18n
localStorage.setItem("locale", currentLocale);
i18n.global.locale.value = currentLocale;

if (!authStore.isAuthenticated) {
try {
const response = await axios.get("/api/Auth/CheckAuth", {
withCredentials: true,
geaders: { "Cache-Control": "no-cache", Pragma: "no-cache" },
});

  if (response.data.success) {
    authStore.login(response.data.userAccount);
  }
} catch {
  authStore.logout();
}

}

if (to.meta.requiresAuth && !authStore.isAuthenticated) {
next({ path: "/userlogin", query: { lang: currentLocale } });
} else if (to.meta.requiresGuest && authStore.isAuthenticated) {
next({ path: "/userlobby", query: { lang: currentLocale } });
} else {
next();
}
});

export default router;

Login project (UserLoby.vue):

ActivityHub project (router/index.js):
import { createRouter, createWebHistory } from "vue-router";
import { useAuthStore } from "@/store/auth";
import axios from "axios";

const routes = [
{
path: "/",
redirect: () => {
const locale = localStorage.getItem("locale") || "zh-TW";
window.location.href = ${process.env.VUE_APP_LOGIN_URL}/?lang=${locale};
return null;
},
},
{
path: "/activityhome",
component: () => import("../views/ActivityHome.vue"),
meta: { requiresAuth: true },
},
{
path: "/testpage",
component: () => import("../views/TestPage.vue"),
},
];

const router = createRouter({
history: createWebHistory(),
routes,
});

router.beforeEach(async (to, from, next) => {
const authStore = useAuthStore();
const locale = localStorage.getItem("locale") || "zh-TW";

if (to.meta.requiresAuth && !authStore.isAuthenticated) {
try {
const response = await axios.get("/api/Auth/CheckAuth", {
withCredentials: true,
headers: { "Cache-Control": "no-cache", Pragma: "no-cache" },
});

  if (response.data.success) {
    authStore.login(response.data.userAccount);
    next();
  } else {
    window.location.href = `${process.env.VUE_APP_LOGIN_URL}/userlogin?lang=${locale}`;
  }
} catch (error) {
  window.location.href = `${process.env.VUE_APP_LOGIN_URL}/userlogin?lang=${locale}`;
}

} else {
next();
}
});

export default router;

ActivityHub project (ActivityHome.vue):

ActivityHub project (TestPage.vue):

圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

0
hurrycc
iT邦新手 5 級 ‧ 2025-05-25 00:17:57

有設定路由規則

我要發表回答

立即登入回答