Question

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

一切都很好，直到这里。但问题是如何阻止某人使用vuejs访问/admin-dashboard页面？早先在PHP中执行此操作的传统方式是这样的：

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

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

任何帮助将不胜感激。

Answer 1

如果您不希望数据泄露，那么后端api上的所有内容都应该在您转移到vue之前进行身份验证和授权。

所以你应该做两件事

FRONT：如果某人未获得授权，则在vue中设置路由约束以重定向或仅显示“未授权”。您可以通过返回上下文以及让您了解上下文的用户或者有api请求来获取管理员信息，如果不是，则返回未授权，并根据该请求显示通知。两者的利弊。
BACK：在您的服务器中检查用户是否有权访问请求之前。我很长一段时间没有使用过php，但是在rails中我们只是在控制器中设置了一个before_action，它根据我们访问它们的要求来检查current_user。

希望有所帮助。

Answer 2

如果您使用的是Vue-Router，则可以在路由中添加前挂钩以确保授权。您可以将某种变量与令牌一起传递，并将其设置为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
       }
    }
}

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

Answer 3

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

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

使用vuejs如何保护管理面板

3 个答案: