基于令牌的Angular身份验证

时间:2016-04-29 14:18:03

标签: angularjs local-storage token http-token-authentication angular-cookies

我想通过api对用户进行身份验证,当用户名和密码正确时,它会返回一个令牌并使用ngStorage存储在本地存储上,但是我读了一些文章说它在localStorage上没有安全保存令牌,他们参考了将它存储到cookie Http。如何将令牌存储在Cookie Http上并且是否安全或是否有更好的方法来处理令牌身份验证

$scope.loginUser = function(){
    $http({
      method: 'POST',
      url: 'ourdomain.com/api/token',
      headers: 
      {
          'Content-type': 'application/x-www-form-urlencoded',
      },
      data: 
      'UserName=' + $scope.username + 
      '&Password=' + $scope.password 
      }).success(function(data, status) {
               $localStorage.token = data;
               console.log(data);
      })
      .error(function(data, status) {
          console.log("Error");
      });
}

2 个答案:

答案 0 :(得分:2)

对于cookie,用户可以禁用cookie。

此链接可以解释基于令牌和基于Cookie的

https://auth0.com/blog/2014/01/07/angularjs-authentication-with-cookies-vs-token/

这是localStorage,sessionStorage,session和cookies之间的区别: What is the difference between localStorage, sessionStorage, session and cookies?

答案 1 :(得分:1)

我热烈建议你使用摊贩:https://github.com/sahat/satellizer

使用电子邮件和密码登录

  

客户:在登录表单中输入您的电子邮件和密码。

     

客户:在表单上提交使用电子邮件和密码调用$ auth.login()。

     

客户端:向/ auth / login发送POST请求。       服务器:检查电子邮件是否存在,如果不存在 - 返回401。

     

服务器:检查密码是否正确,如果不正确 - 返回401。

     

服务器:创建一个JSON Web令牌并将其发送回客户端。

     

客户端:解析令牌并将其保存到本地存储,以便在页面重新加载后继续使用。

var user = {
  email: $scope.email,
  password: $scope.password
};

$auth.login(user)
  .then(function(response) {
    // Redirect user here after a successful log in.
  })
  .catch(function(response) {
    // Handle errors here, such as displaying a notification
    // for invalid email and/or password.
  });


// Controller
$scope.isAuthenticated = function() {
  return $auth.isAuthenticated();
};

<!-- Template -->
<ul ng-if="!isAuthenticated()">
  <li><a href="/login">Login</a></li>
  <li><a href="/signup">Sign up</a></li>
</ul>
<ul ng-if="isAuthenticated()">
  <li><a href="/logout">Logout</a></li>
</ul>