用户登录后重定向 [英] Redirect after user has logged in

问题描述

我对 Angular 还很陌生，现在我只是想设置我的所有路由并按照我想要的方式工作.

I'm pretty new to Angular, and right now I'm just trying to get all my routes set up and working as I'd like.

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

Setup: When a user navigates to certain pages (/settings for this example) the app should check if there is a user already logged in. If there is continue as usual. Otherwise the user should go to the login page (/login).

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

What I'd like: After the user has successfully logged in they should go to the page they were originally trying to get to (/settings)

我的问题:是否有一种Angular 方式"可以记住用户试图去的地方?

My question: Is there an "Angular way" to remember where the user was trying to go to?

相关代码:

app.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 的视频让我走到了这一步.

Much thanks to John Lindquist for the video which got me this far.

推荐答案

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

First off, you do not want to redirect the user to a login page.

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

An ideal flow in a single page web app is as follows:

1. 用户访问网站.网站回复静态资产特定路线上的角度应用(例如/profile/edit).

1. A user visits a web site. The web site replies with the static assets for the angular app at the specific route (e.g. /profile/edit).

控制器(对于给定的路由)使用 $http、$route 或其他机制调用 API(例如，使用来自登录用户帐户的详细信息通过获取到/api/v1/users/profile)

The controller (for the given route) makes a call to an API using $http, $route, or other mechanism (e.g. to pre-fill the Edit Profile form with details from the logged in user's account via a GET to /api/v1/users/profile)

如果/当客户端从 API 收到 401 时，向登录，然后重放 API 调用.

If/while the client receives a 401 from the API, show a modal to login, and replay the API call.

API 调用成功(在这种情况下，用户可以查看为其帐户预先填写的编辑个人资料"表单.)

The API call succeeds (in this case, the user can view a pre-filled Edit Profile form for their account.)

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

How can you do #3? The answer is $http Response Interceptors.

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

For purposes of global error handling, authentication or any kind of synchronous or asynchronous preprocessing of received responses, it is desirable to be able to intercept responses for http requests before they are handed over to the application code that initiated these requests. The response interceptors leverage the promise apis to fulfil this need for both synchronous and asynchronous preprocessing.

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

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

Now that we know what the ideal user experience should be, how do we do it?

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

示例基于本文:

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

祝你好运，Angularing 快乐！

Good luck and happy Angularing!

这篇关于用户登录后重定向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！