Question

这是我的问题：如果用户未登录，我想将用户重定向离开此页面。现在我正在使用

<script text="javascript" type="module">
import { getLogInState } from './index.js';

redirectIfNotLoggedIn();

function redirectIfNotLoggedIn() {
    if (!getLogInState()) {
        window.location.replace("#landing");
    }
}
</script>

这从 index.js 导入了一个函数，该函数从我的 Vue 实例（我使用的是 Vue.JS）中检索“loggedIn”的值，唯一的问题是模块类型脚本是在 HTML 之后加载的，因此用户短暂（或更长，取决于在他们的连接上）看到页面的内容在他们被带回主页面之前闪烁。

因此，如果用户在加载 HTML 之前未登录页面，我需要重定向用户，同时还要访问外部函数。这可能吗？我的第一个想法是尝试在单独的非模块脚本中调用该函数，因为它已经由模块脚本导入，但我不知道这是否真的有效，以及该脚本是否在页面的其余部分之前加载（和因此模块）没关系。
也许有更好的方法来访问 Vue 根目录，但我一直没能找到。

请注意，我的网站是通过 jquery 运行的 SPA，因此是 #links。此代码包含在一个单独的 HTML 文件中，当您访问它时，该文件会被推入“内容”div。这不应该影响任何潜在的答案，但我想我可能会提到它。

Answer 1

您应该使用 navigation guards from the router。

这是一个抽象的代码，您可以使用它来将逻辑集中在 Vue Router 上

  Router.beforeEach(async (to, from, next) => {
        //Indetermined state of authentication
        // storeAuth.checkUserStatus automatically handles the is 
        if (isLogged() === null) await storeAuth.checkUserStatus();
        if (isLogged() === true) return next();
        if (!needsAuth(to)) return next();
        next({ name: 'login' });
    });

因此，您可以使用自定义函数来确定路由是否需要身份验证。一种解决方案是在路由的元数据中定义一个“needsAuth”布尔值。

所以你可以像这样实现needsAuth：

const needsAuth = (route: Route): boolean => {
    return (route.meta.needsAuth) === true;
};

Answer 2

我刚刚在我的路由器上添加了一个检查，如果用户未登录，则不会加载页面，这是我在阅读完所有内容后想到的更聪明的解决方案，谢谢大家！

在页面加载之前运行模块脚本？

2 个答案: