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

【问题标题】：Run module script before page load?在页面加载之前运行模块脚本？
【发布时间】：2021-05-26 07:20:36
【问题描述】：

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

<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。这不应该影响任何潜在的答案，但我想我可能会提到它。

【问题讨论】：

我认为您不需要重定向。可能会根据您的登录状态更改内容的可见性/显示。
是的，我希望可能有更简单的方法，但最好还是那样做，呵呵。他们说你永远不能在网络开发中偷工减料......

标签： javascript jquery vue.js

【解决方案1】：

我刚刚向我的路由器添加了一个检查，如果用户未登录，则不加载页面，这是我在阅读完所有内容后得出的更智能的解决方案，所以谢谢大家！

【讨论】：

【解决方案2】：

你应该使用navigation guards from the router。

这是一个抽象的代码，您可以使用它来将逻辑集中在 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;
};

【讨论】：

感谢您的回答！我想我应该让它更清楚一点，我只是使用一些 Jquery 来路由而不是使用 vue-router 来简化事情，并且实际的 loggedIn 布尔值存储在我的 Vue 实例中，该实例由 index.js 实例化这是我用于路由的 Jquery。：$(window).on("hashchange", function () { var page = window.location.hash; console.log(page.substring(1)); $.get(page.substring(1) + ".html", function (pageContent) { $("#content").html(pageContent); }); });