17

我对 Angular 还是很陌生,现在我只是想设置我所有的路线并按照我的意愿工作。

设置: 当用户导航到某些页面(/settings在本例中)时,应用程序应检查是否有用户已登录。如果有,则照常继续。否则,用户应该转到登录页面 ( /login)。

我想要什么: 用户成功登录后,他们应该转到他们最初尝试访问的页面(/settings

我的问题: 是否有一种“角度方式”来记住用户试图去哪里?

相关代码:

应用程序.js

  .when('/settings', {
      templateUrl: '/views/auth/settings.html',
      controller: 'SettingsCtrl',
      resolve: {
        currentUser: function($q, $location, Auth) {
          var deferred = $q.defer();

          var noUser = function() {
            //remember where the user was trying to go
            $location.path("/login")
          };

          Auth.checkLogin(function() {
            if (Auth.currentUser()) {
              deferred.resolve(Auth.currentUser());
            } else {
              deferred.reject(noUser());
            }
          });

          return deferred.promise;
        }
      }
    })

登录.js

  $scope.submit = function() {
    if(!$scope.logInForm.$invalid) {
      Auth.login($scope.login, $scope.password, $scope.remember_me)
      //go to the page the user was trying to get to
    }
  };

非常感谢 John Lindquist的视频让我走到了这一步。

4

1 回答 1

17

首先,您不想将用户重定向到登录页面。

单页 Web 应用程序中的理想流程如下:

  1. 用户访问网站。网站在特定路径(例如 /profile/edit)回复 Angular 应用程序的静态资产。

  2. 控制器(对于给定的路由)使用 $http、$route 或其他机制(例如,通过 GET 到 /api/v1 的已登录用户帐户的详细信息预先填写编辑配置文件表单)调用 API /用户/个人资料)

  3. 如果/当客户端从 API 收到 401 时,显示一个登录模式,并重放 API 调用。

  4. API 调用成功(在这种情况下,用户可以查看其帐户的预填编辑配置文件表单。)

你怎么能做到#3?答案是 $http响应拦截器

出于全局错误处理、身份验证或接收响应的任何类型的同步或异步预处理的目的,希望能够在 http 请求的响应被移交给启动这些请求的应用程序代码之前拦截它们。响应拦截器利用Promise api 来满足同步和异步预处理的需求。

http://docs.angularjs.org/api/ng.$http

既然我们知道理想的用户体验应该是什么,我们该怎么做呢?

这里有一个例子: http ://witoldsz.github.com/angular-http-auth/

该示例基于这篇文章:

http://www.espeo.pl/2012/02/26/authentication-in-angularjs-application

祝你好运,快乐 Angularing!

于 2013-03-07T01:42:10.720 回答