使用 MEAN 堆栈保护路由和模板？

Posted 2023-03-08

【中文标题】使用 MEAN 堆栈保护路由和模板？

【英文标题】：Secure routes & templates with MEAN stack?

【发布时间】：2015-01-21 13:06:43

【问题描述】：

（NOOB ALERT！刚刚从 Microsoft 过渡到 MEAN）

任何人都有一个在公共和私人区域使用 MEAN 堆栈的不同路线/布局/模板的实体模式示例？我已经尝试过嵌套控制器，但这会引发路由问题。我也不想复制 Express 和客户端应用程序中的所有路由。在理想情况下，某些相关文件夹应被视为“私有”，而其他相关文件夹应被视为“公共”，每个区域具有不同的布局（包装器）。未经身份验证的用户应限制在公共区域。

在非 SPA/MS 世界中，一切都在服务器端维护。保护文件、预渲染等具有一定的舒适性。正因为如此，我注意到使用 Jade 建造区域的诱惑可能超出了我应有的程度。即使在我写这篇文章的时候，我也开始觉得客户端看到的任何东西都不应该是服务器端的，除了在使用 Node 应用程序进行路由、数据编组和保护路由本身时的初始布局和索引。

注意：目前使用 Passport 进行身份验证。

提前感谢您的时间和详细的回答。

【参考方案1】：

快速思考：

通过获取特定文件夹的路线来提供您的部分。例如，您可以在您的 partials 文件夹中有一个公共和受保护的文件夹。

-app
  --partials
    ---public
    ---protected

然后在您的受保护路由上添加身份验证中间件。

对于未受保护的：

app.get( '/partials/public/*', function() //send partial html here  )

受保护：

app.get( '/partials/protected/*', passport.authenticate, function() //same as above  )

最后，在您的 Angular 应用程序中（希望您已相应地设置了模板 URL），添加一个 httpInterceptor 以检查响应是否为 401，如果是，则重定向到登录页面 -> 在这里找到： Credits to Fredrick Nackstad。这是重要的sn-p

var interceptor = ['$location', '$q', function($location, $q) 
    function success(response) 
        return response;
    

    function error(response) 

        if(response.status === 401) 
            $location.path('/login');
            return $q.reject(response);
        
        else 
            return $q.reject(response);
        
    

    return function(promise) 
        return promise.then(success, error);
    
];

$httpProvider.responseInterceptors.push(interceptor);

这将允许您让 Angular 访问静态内容，同时仍然可以控制所提供的内容。希望这会有所帮助。