Question

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

beforeCreate()

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

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

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

Answer 1

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

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

Answer 2

使用 JavaScript 实现安全代码不被视为“最佳实践”。如果用户在他们的浏览器中关闭 JavaScript，他们就有效地绕过了您的安全。

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

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

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

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

Answer 3

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

beforeMount：它在安装开始之前被调用：渲染函数即将被第一次调用。但是这个钩子(beforeMount) 在服务端渲染期间不会被调用。
beforeUpdate：在修补 DOM 之前数据发生变化时调用它。这是在更新之前访问现有 DOM 的好地方，例如删除手动添加的事件侦听器。

在服务端渲染时也不会调用这个钩子，因为只有初始渲染是在服务端执行的。

有关更多信息，请参阅 Vue.js 文档。

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

在加载 html 之前运行脚本 vuejs

3 个答案: