允许访问AngularJS应用程序的传统登录页面

我开始了一个简单的Web应用程序，其中API为Python Flask，前端为AngularJS，全部由Nginx提供服务。该API位于http://site/api/，显然所有端点都得到了适当的保护。允许访问AngularJS应用程序的传统登录页面

我探索我的关于身份验证选项，我偶然发现了this page，其中作者指出在他的介绍如下：

一种选择我尝试了是有一个传统的登录页面其中，如果成功，则重定向到加载实际应用程序的安全URL。这还有一个额外的好处，即用于登录用户页面的客户端代码和视图模板对于任何未登录的用户都是不可访问的。 [...]我想要一个无缝的用户体验，除了初始化以外没有完整的页面重新加载页面加载，所以我决定稍微玩一下，看看我是否可以提出一个替代方案。

笔者随后进行详细叙述替代，同时我会通过实施原液（传统登录其重定向到一个安全的网址页）有兴趣。我尝试了几种方法，例如成功验证后使用Nginx X-Accel-Redirect，但未能达到完全满意的解决方案。

所以有这样的问题：我怎么能实现一个传统的登录页面，成功后，重定向到一个安全的URL包含我的AngularJS应用程序？目前，我的登录端点位于http://site/api/login，静态数据（包括Angular应用程序）由nginx提供。

来源

2014-02-26 icecrime

的代码看起来像 HTML：

<div class="col-sm-9"> 
    <div class="container login"> 
     <h1>User Login</h1> 
     <p>Please login below, if you have forgotten your password please <a href="/index.html#/resetpassword"><b>Click Here</b></a> to reset it.</p> 
     <form> 
      <div class="row"> 
       <div class="col-sm-6 form-group"> 
        <label for="email">Email Address</label> 
        <input class="form-control input-lg" type="email" id="inputEmail" required ng-model="user.email" placeholder="Enter your email"> 
       </div> 
       <div class="col-sm-6 form-group"> 
        <label for="password">Password</label> 
        <input class="form-control input-lg" type="password" required ng-model="user.password" placeholder="Enter your password"> 
       </div> 
      </div> 
      <div ng-show="IsLoginFailure"> 
       <p><span class="error"><b>Error:</b>Your emailId or password is wrong </span></p> 
      </div> 
      <br /> 
      <button class="btn btn-grove-one btn-lg btn-bold" type="submit" ng-click="login()">Login</button> 
     </form> 
     <br /> 
     <div class="clearfix"></div> 
    </div> 
</div>

.controller('LoginCtrl', ['$scope', '$http', '$rootScope', '$location', '$route', function ($scope, $http, $rootScope, $location, $route) { 


$scope.login = function() { 
      $http({ 
       method: 'POST', 
       url: 'http://site/api/login', 
       data: $scope.user 
      }).success(function (response) { 
        $location.path(Your Path); 
        $route.reload(); 
       }); 

      }).error(function() { 
       $scope.IsLoginFailure = true; 
      }) 
     } 
    }])

来源

2014-02-26 07:57:55

谢谢，但这听起来不像一个安全的URL给我：任何人都可以直接转到AngularJS应用程序的url（'YourPath'在你的代码中）并检索html和js而无需登录。 – icecrime

我可以看到两个可能的解决方案：

1）瓶（登录页面和静态文件即成一切应用程序）在一个单独的蓝图。使用类似Flask-Login的东西进行身份验证。

2）如果想要更好的性能，可以用use Lua scripting in Nginx来实现对静态资源的认证。您需要在登录页面中设置一个可以在Lua中阅读的cookie。如果第一个解决方案导致性能问题，我只会这样做。

来源

2014-02-26 22:13:53 catwell

允许访问AngularJS应用程序的传统登录页面

回答

相关问题