使用 vuejs 如何保护管理面板答案

【问题标题】：Using vuejs how to secure the admin panel使用 vuejs 如何保护管理面板
【发布时间】：2017-06-30 07:34:11
【问题描述】：

我刚刚开始学习 VueJS。我正在使用 vuejs 调用为我的应用程序执行 CRUD 操作的外部 api。 CRUD 操作在需要用户名和密码的管理面板 (http://domain.com/admin-dashboard) 中进行。外部 api 端点提供了一个api/auth 端点，它接受用户名和密码，如果详细信息正确，则提供 JWT 令牌。通过在 Authorization 标头 Bearer xxx 中传递令牌（其中 xxx 是令牌 id）向 CRUD 操作发出 api 请求时，应使用此令牌

到目前为止一切正常。但问题是如何阻止某人使用 vuejs 访问/admin-dashboardpage？之前在 php 中执行此操作的传统方式是这样的：

<?php
session_start();
if(empty($_SESSION['is_logged_in'])){
 // Redirect to login page
 header('Location login.php');
 exit();
}

这样我可以确保没有未经授权的用户可以访问仪表板。但是现在由于我的整个应用都是基于 vuejs 的，我该如何保护admin-dashboard 页面呢？

我们将不胜感激。

【问题讨论】：

标签： vue.js

【解决方案1】：

如果您不希望数据泄漏，那么后端 api 上的所有内容都应该像迁移到 vue 之前一样经过身份验证和授权。

所以你应该做两件事

FRONT：在 vue 中设置路由约束以重定向，如果有人未授权或仅显示“未授权”。您可以通过与用户一起返回上下文来执行此操作，让您知道上下文或有 api 请求以获取管理员信息并返回未授权（如果不是）并根据该请求显示通知。两者各有利弊。
返回：在您的服务器中检查用户是否具有访问权限，然后再进入请求的核心。我已经很久没有使用 php 了，但是在 Rails 中，我们只是在控制器中设置了一个 before_action 来检查 current_user 是否符合我们对他们访问的任何要求。

希望对您有所帮助。

【讨论】：

这不是一个“安全”问题，而是一个大业务问题！如果管理面板没有隐藏，恶意用户可以看到面板的外观以及这些管理员实际上能够做什么！这绝对是个问题。
虽然我同意你通过暴露路由来增加你的攻击面/易于利用，但主要关注的是锁定后面和前面的 API。如果您使用 nuxt 之类的东西，它不会在每个请求上交付整个包，那就更好了。

【解决方案2】：

您在服务器上使用什么？看起来，很多 PHP 人都在坚持使用 PHP。在任何情况下，问题都是一样的。授权和身份验证始终是服务器的职责。当服务器响应 ajax 请求时，重定向到登录页面实际上是错误的表单。您应该发送401 Unauthorized or 403 Forbidden。您的前端永远不会显示未经授权的数据，因为您的后端永远不会发送它。

在vue中，你需要管理JWT。它会持续多长时间以及您将其存放在哪里。你会用cookie, or in a header 发送它吗？然后您需要管理对 ajax 调用的 401/403 响应（显示登录屏幕）。当您从服务器生成的页面切换到 SPA 时，您会遇到很大的麻烦。确保你对新范式有所了解 :-) 我不确定。

【讨论】：

【解决方案3】：

如果您使用的是 Vue-Router，您可以在路由中添加一个 before 钩子以确保授权。您可以将某种变量与您的令牌一起传递，并将其设置为 localStorage 或 Vuex 状态。

router.beforeEach((to, from, next) => {
    if(/admin/.test(to.path)) { // Using regex to test the URL path
       if(store.state.user.is_admin){ // Assuming is_admin is a boolean in Vuex state
           next() // Allows it to proceed
       } else {
           next('/login')  // Or make a 403 page or whatever
       }
    }
}

当然，正如其他 cmets 所说，您必须保护后端，但您的问题特别是关于如何不允许在前端导航。

【讨论】：