针对restful API的角度登录/身份验证

时间:2015-08-04 20:25:37

标签: javascript angularjs rest authentication

我在ng-options="item.id as item.name for item in countries track by id" 应用中创建了一个基本身份验证系统,该系统是针对硬编码凭据编写的 - 请参阅下文:

app.js

angular

login.html

/* global app:true */
/* exported app */
'use strict';

/**
 * @ngdoc overview
 * @name WebAppApp
 * @description
 * # WebAppApp
 *
 * Main module of the application.
 */
var app = angular
  .module('WebAppApp', [
    'ngAnimate',
    'ngAria',
    'ngCookies',
    'ngMessages',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch'
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/login.html',
        controller: 'loginCtrl',
        controllerAs: 'login'
      })
      .when('/home', {
        templateUrl: 'views/home.html'
        //controller: 'loginCtrl',
        //controllerAs: 'login'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

login.js

<form ng-submit="submit()">
  Username: <input type="text" id="username" ng-model="username" /><br>
  Password: <input type="password" id="password" ng-model="password" /><br>
  <input type="submit" value="Submit" />
</form>

这很有效。我现在要做的是,如果成功返回访问令牌,则通过将数据发布到服务器/登录来检查api调用的用户名和密码,然后将其存储在cookie中。此时用户可以访问应用程序的其余部分。

如果凭据失败,则进行验证以防止用户登录。

这样做的最佳方式是什么?

1 个答案:

答案 0 :(得分:2)

首先检查此url

您的代码看起来像这样:

$scope.submit = function(){
    $http.post('/login', {
        username:$scope.username,
        password:$scope.password
    }).then(function(response) {
        if (response.data=="ok") {
          //Login was ok
          $location.path("/home");
        } else {
          //Login was not ok
        } 
      }, function(response) {
           //Error happend, response.status or response.statusText have details
    });
}