时间戳

首页 > 解决方案 > 在页面加载之前运行模块脚本？

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

问题描述

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

<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 root 的方法，但我一直无法找到它。

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

标签： javascriptjqueryvue.js

解决方案

您应该使用路由器的导航防护。

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

  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;
};

推荐阅读