在加载html之前运行脚本vuejs [重复]

Posted 2023-02-23

【中文标题】在加载html之前运行脚本vuejs [重复]

【英文标题】：run script before html is loaded vuejs [duplicate]

【发布时间】：2021-04-27 15:47:18

【问题描述】：

我想测试用户是否登录，如果没有，他将返回登录页面。 我希望在加载 html（或模板）之前执行检查用户是否登录的脚本。 我试过了

beforeCreate()

和其他东西，但 html 仍然在脚本运行之前加载。 这是我的代码

if(sessionStorage.getItem("email") == undefined) location.href = "/";

编辑 我使用 CLI 制作了这个 vue 项目，所以我没有带有头部和主体的普通 index.html，我可以在 vue 之外的任何地方简单地添加脚本。

【参考方案1】：

使用 javascript 实现安全代码并不是“最佳实践”。如果用户在他们的浏览器中关闭 JavaScript，他们实际上已经绕过了您的安全。

相反，使用服务器端代码来检测当前用户是否登录，如果没有，则将 HTML 重定向发送到登录页面而不是正常的 HTML 内容。

伪代码（因为您没有指定任何服务器端语言）：

if(userLogin <> true)
    Return HtmlRedirect("YourLoginPage")
...
Return CuurrentPage

如果用户无权查看，此方法可防止将任何 HTML 发送给用户。

【讨论】：

如果您绝对必须使用 JavaScript，请确保任何重定向代码都在 HTML 页面的 HEAD 中，以便在页面在浏览器中呈现之前执行。

有一个服务器端检查，我没有任何问题或错误，我只是想让它变得更好。我是 vuejs 的新手，所以也许我想念一些东西

如果您已经进行了服务器端检查以防止将 HTML 发送到客户端，那么您添加的任何 JS 代码都将无关紧要，因为它永远不应在客户端浏览器中执行。它只会无缘无故地将未使用的代码添加到每个安全页面 - 诚然，这将是一个小幅增加，不太可能对客户端产生太大影响，但如果代码在未来产生任何错误（随着库和标准的更新） )，那么您创建了一个难以追踪的错误。如果永远无法执行，我建议无需为此添加任何 JS 代码。

【参考方案2】：

我同意@Dragonlaird 所说的从客户端处理它不是最佳实践。但是，我认为您必须尝试beforeMount 或beforeUpdate 而不是beforeCreate，因为您需要在加载HTML（或模板）之前完成这些工作。根据 Vue.js 文档，

beforeMount: 它在挂载开始之前被调用：渲染函数即将被第一次调用。 但是这个钩子（beforeMount）在服务端渲染时不会被调用。

beforeUpdate: 在修补 DOM 之前数据发生变化时调用它。这是在更新之前访问现有 DOM 的好地方，例如删除手动添加的事件监听器。

在服务器端渲染期间也不会调用此钩子，因为只有初始渲染是在服务器端执行的。

更多信息请参考 Vue.js 文档。

https://vuejs.org/v2/api/#Options-Lifecycle-Hooks

【参考方案3】：

在启动 vue 实例之前尝试检查您的条件是否匹配，并在满足如下条件后启动它：

if(sessionStorage.getItem("email") == undefined) 
   location.href = "/";
 else 
   var app = new Vue(
      el: '#app',
      data: 
         message: 'Hello Vue!'
      
   )

【讨论】：

我使用 CLI 制作了这个 vue 项目，所以我认为我不能使用它，我也在使用路由器。

为什么不能？在 main.js 中添加

请不要只发布代码作为答案，还要解释您的代码的作用以及它如何解决问题的问题。带有解释的答案通常更有帮助、质量更好，并且更有可能吸引投票。