针对restful API的Angular登录/认证

Angular login/authentication against restful API

本文关键字：登录 认证 Angular restful API 针对      更新时间：2023-09-26

我在一个angular应用程序中创建了一个基本的身份验证系统，该系统是根据硬编码凭据编写的-见下文:

app.js 

/* 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.html 

<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>

login.js 

'use strict';
//app global variable
//this is hte controller that handles post requests
app.controller('loginCtrl', function ($scope, $location) {
    $scope.submit = function(){
        var uname = $scope.username;
        var password = $scope.password;
        if($scope.username == 'admin' && $scope.password == 'admin'){
            $location.path('/home');
        } else {
            alert('username or password is wrong');
        }
    };
});

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

如果凭据失败，将进行for验证，从而阻止用户登录。

最好的方法是什么?

首先检查这个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
    });
}
相关文章：