在我的 Vue 3 應用程式（基于 Quasar 2）中，我設定了一個全域導航守衛。這會呼叫外部 API 端點來檢查用戶是否已登錄。如果沒有，則用戶將被重定向到身份驗證提供者的登錄表單。
以下代碼有效并完成了它應該做的事情。但是，當用戶未通過身份驗證時，瀏覽器會在重定向之前顯示最初請求的頁面不到一秒的時間。
我不明白這是從哪里來的以及如何解決它，即用戶將立即被重定向，而瀏覽器不會很快顯示應用程式的頁面。
import { boot } from 'quasar/wrappers';
import useUserInfoStore from 'src/stores/userInfo';
import userClient from 'src/api/userClient';
export default boot(({ router }) => {
const userInfoStore = useUserInfoStore();
// try to access the current user's information to check if authenticated
router.beforeEach(() => {
userClient.getUserInfo().then((response) => {
userInfoStore.authenticated = true;
}).catch((e) => {
// otherwise, assume that the user hasn't authenticated and redirect to auth provider
if (e.response.status === 401) {
userInfoStore.$reset();
window.location.href = 'http://localhost:8500/oauth2/authorization/keycloak';
}
});
});
});
uj5u.com熱心網友回復：
會發生什么：
beforeEach叫做userClient.getUserInfo()立即回傳一個承諾beforeEach立即回傳undefined，路由器繼續導航- 最初請求的頁面會顯示片刻
- 承諾在錯誤中解決，您將被重定向到登錄頁面
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/432667.html
上一篇：在網址中使用I18n
下一篇：如何將vue版本從3降級到2