Javascript 角度JS认证维护_Javascript_Angularjs_Authentication

Javascript 角度JS认证维护

javascript angularjs authentication

Javascript 角度JS认证维护,javascript,angularjs,authentication,Javascript,Angularjs,Authentication,我正在寻找最好的架构解决方案我有以下html： <body ng-controller="individualFootprintController as $ctrl"> <div ng-hide="$ctrl.authenticated"> <h1>Login</h1> With Corporate Account: <a href="/login/corporate">click h

我正在寻找最好的架构解决方案

我有以下html：

<body ng-controller="individualFootprintController as $ctrl">
<div ng-hide="$ctrl.authenticated">
            <h1>Login</h1>
            With Corporate Account: <a href="/login/corporate">click here</a>
</div>

问题：

1）该控制器是否适合放置此逻辑

2）我想要实际的“is_authenticated”值。如果我只想发出一次请求，那么如何实现这一点呢？

可能后端身份验证需要某种实际的令牌。也就是说，您不只是在某个地方设置

true

false

标志并称之为身份验证，而是为了能够与后端通信，您需要在请求中包含用户名/密码/cookie/令牌，否则请求将被拒绝

控制器不是存储此类东西的好地方，因为控制器不是永久性的。或者至少你不应该尽可能让它们永久化。此外，将令牌存储在控制器中不允许其他任何东西访问它

您是否登录应基于您是否拥有有效的身份验证令牌

这个令牌必须存储在一个规范的地方，最适合服务

其他服务从那里获取令牌，并根据令牌是否可用来决定应用程序当前是否“登录”

应如何构建的粗略草图：

app.service('AuthService', function () {
    this.token = null;
});

app.service('FooService', function (AuthService, $http) {
    $http.get(..., AuthService.token, ...)
});

app.controller('LoginStatusController', function (AuthService) {
    Object.defineProperty(this, 'isLoggedIn', {
        get: function () { return AuthService.token != null; }
    });
});

当您实际登录并获取令牌时，您设置了

AuthService.token

，它将可用于所有其他服务和控制器。如果令牌无效或未设置，则所有服务和控制器都将失去其已验证状态。

我通常会执行以下操作：

使用

利用

resolve

hook（它解析一些参数并将它们注入控制器），将我的路由定义为主路由的子例程，主路由在每次路由更改时检查auth

脚本/服务/user.js

 angular.module('yourmodule')
  .service('userSrv', function ($http, $q) {
    var srv = {};

    srv.getAuthenticatedUser = function() {
      return $http.get("/authenticated_user");
    };

    return srv;
  });

angular
 .module('yourmodule')
 .config(function ($stateProvider) {
   $stateProvider
    .state('authenticated', {
      abstract: true,
      template: '<ui-view />',
      controller: 'AuthenticatedCtrl',
      resolve: {
        signedInUser: function(userSrv, $q) {
          return userSrv.getAuthenticatedUser()
          .then(function(null, function() {
            //Catch any auth error, likely 403
            //And transform it to null "signedInUser"
            //This is the place to handle error (log, display flash)
            return $q.resolve(null);
          });
        }
      }
    })
    .state('authenticated.myspace', {
      url: '/myspace',
      templateUrl: 'views/myspace.html'
    });
 });

 angular.module('yourmodule')
  .controller('AuthenticatedCtrl', function (signedInUser, $scope, $state) {
   //Here you set current user to the scope
   $scope.signedInUser= signedInUser;

   $scope.logout = function() {
     //this is where you would put your logout code.
     //$state.go('login');
   };
 });

脚本/routes.js

 angular.module('yourmodule')
  .service('userSrv', function ($http, $q) {
    var srv = {};

    srv.getAuthenticatedUser = function() {
      return $http.get("/authenticated_user");
    };

    return srv;
  });

angular
 .module('yourmodule')
 .config(function ($stateProvider) {
   $stateProvider
    .state('authenticated', {
      abstract: true,
      template: '<ui-view />',
      controller: 'AuthenticatedCtrl',
      resolve: {
        signedInUser: function(userSrv, $q) {
          return userSrv.getAuthenticatedUser()
          .then(function(null, function() {
            //Catch any auth error, likely 403
            //And transform it to null "signedInUser"
            //This is the place to handle error (log, display flash)
            return $q.resolve(null);
          });
        }
      }
    })
    .state('authenticated.myspace', {
      url: '/myspace',
      templateUrl: 'views/myspace.html'
    });
 });

 angular.module('yourmodule')
  .controller('AuthenticatedCtrl', function (signedInUser, $scope, $state) {
   //Here you set current user to the scope
   $scope.signedInUser= signedInUser;

   $scope.logout = function() {
     //this is where you would put your logout code.
     //$state.go('login');
   };
 });

views/myspace.html

 <!-- here you call parent state controller $scope property -->
 <div ng-hide="signedInUser">
   <h1>Login</h1>
     With Corporate Account: <a href="/login/corporate">click here</a>
 </div>


登录
公司账户：

1）我想要实际的“is_authenticated”值。如果我只想发出一次请求，如何实现这一点我的解决方案在每次路由更改时要求经过身份验证的用户。这似乎很奇怪，但实际上是可行和快速的。查询不应大于30ms，这是一个非常小的选择。尽管如此，询问“我是否经过身份验证”和“获取经过身份验证的用户”是完全一样的，只是一个返回布尔值，另一个返回用户。我建议，就像我刚才向您展示的那样，通过请求经过身份验证的用户来处理“我是否经过身份验证”问题，然后使用“if（user）”（空值处理）对其进行booleaning

2）该控制器是否适合放置此逻辑？是和否。正如您所看到的，控制器正是“将用户设置为作用域对象”的地方，但作用域继承允许您不为每个路由重复它。不过，应该将http api逻辑移植到服务，并且应该在单独的文件中设置路由事件（“请获取此页面的已验证用户”是一个路由事件IMHO）

注意：如果您需要完整的路由“保护”（如在未经身份验证的情况下重定向，请再问一个问题，我很乐意回答）

他正在使用cookies身份验证。在jwt身份验证场景中，“我有一个令牌”并不意味着您已通过身份验证。身份验证更像是“我的令牌有效”，必须经常检查。如果令牌是隐式的，那么就用

true

false

标志替换它。是的，在您尝试之前，您不会知道您的令牌是否有效。所以当它失败时，将其失效。您如何知道OP正在使用cookie？1）因为

$http.get（“/is_auth”）

没有显式发送令牌，所以我推断它隐式发送cookie。除非他有一个他没告诉我们的拦截器。2）因为“已验证”逻辑使我们认为后端有某种“会话”。对于令牌，您需要反序列化令牌并检查用户是否存在。完成此操作后，自然会返回用户。我的意思是，有了cookie，你可以在没有用户的情况下进行会话；有了令牌，这会很奇怪。