如何使用 AngularJS、Devise 和 UI 路由器全局实现身份验证? [英] How to globally implement Authentication with AngularJS, Devise and UI Router?

问题描述

我对 Angular 很陌生，所以这可能是一个新手问题.

I'm quite new to Angular so this might be a newbie question.

我正在尝试实现一个简单的任务管理器(只是一个练习)，使用 Rails 作为后端，Angular 作为前端.到目前为止，我遵循了一个教程，一切正常.

I'm trying to implement a simple task manager (just an exercise) with Rails as backend and Angular as frontend. So far I followed a tutorial and everything worked fine.

现在我想全局实现身份验证.这意味着:当用户未注册和登录时，她应该看到启动页面或登录页面.

Now I want to globally implement Authentication. That means: When a user is not registered and logged in, she should see a splash page or the login page.

我不想在每个 Angular 控制器中都这样做，因为 DRY.所以我认为 UI 路由器可能是一个好地方.我有点怀疑 $httpProvider.interceptors 可能有用.

I don't want to do that in every single Angular controller, because DRY. So I figured the UI Router might be a good place. And I have a slight suspicion that maybe $httpProvider.interceptors might be useful.

这就是我得到的程度.我可以检查用户是否通过身份验证并阻止页面加载.但仅此而已.我从这里怎么走?有没有我错过的好教程?

This is how far I got. I can check if a user is authenticated and prevent the page from loading. But nothing more. How would I go from here? Are there any good tutorials out there I missed?

这个问题在 Stackoverflow 上有类似的方向，但没有解决我的问题问题，因为他们没有使用 Devise.

This question on Stackoverflow goes in a similar direction but doesn't solve my problem since they are not using Devise.

谢谢！

// app.js
var app = angular.module("TaskManager", ['ui.router', 'templates', 'Devise'])
.config([
    '$stateProvider',
    '$urlRouterProvider',
    function($stateProvider, $urlRouterProvider){
        $stateProvider
            .state('home', {
                url: '/home',
                templateUrl: 'home/_home.html',
                controller: 'MainCtrl', 
                resolve: {
                    projectPromise: ['projects', function(projects) {
                        console.log($rootScope);
                        return projects.getAll();
                    }]
                }
            })
            .state('projects', {
                url: '/projects/{id}',
                templateUrl: 'projects/_projects.html',
                controller: 'ProjectsCtrl',
                resolve: {
                    project: ['$stateParams', 'projects', function($stateParams, projects) {
                        return projects.get($stateParams.id);
                    }]
                }
            })
            .state('login', {
                url: '/login',
                templateUrl: 'auth/_login.html',
                controller: 'AuthCtrl',
                onEnter: ['$state', 'Auth', function($state, Auth) {
                    Auth.currentUser().then(function() {
                        $state.go('home');
                    })
                }]
            })
            .state('register', {
                url: '/register',
                templateUrl: 'auth/_register.html',
                controller: 'AuthCtrl',
                onEnter: ['$state', 'Auth', function($state, Auth) {
                    Auth.currentUser().then(function() {
                        $state.go('home');
                    })
                }]
            });

        $urlRouterProvider.otherwise('home');
    }
]);
// run blocks
app.run(function($rootScope, Auth) {
  // you can inject any instance here
  $rootScope.$on('$stateChangeStart', 
    function(event, toState, toParams, fromState, fromParams){ 
        if(!Auth.isAuthenticated()) {
            // So the magic should probably happen here. But how do I implement this?
            // And how do I allow users to access the /login and /register page?
            event.preventDefault(); 
        }
  })
});

推荐答案

我写了一篇文章，基本上回答了这个问题(至少在高层次上)，名为 如何使用 AngularJS 和 Ruby on Rails 设置身份验证.

I wrote an article that basically answers this question (at a high level at least) called How to Set Up Authentication with AngularJS and Ruby on Rails.

如果您想检查用户是否在任何特定路由上通过了身份验证，您可以(在 Angular 的标准路由器中，虽然我不了解 ui-router)使用 resolve.以下是我的一个旧项目中的几条路线:

If you want to check whether the user is authenticated at any particular route, you can (in Angular's standard router, although I don't know about ui-router) use resolve. Here are a couple routes from an older project of mine:

      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl',
        isPublic: true
      })
      .when('/today', {
        templateUrl: 'views/announcements.html',
        controller: 'AnnouncementsCtrl',
        resolve: {
          auth: ['$auth', function($auth) {
            return $auth.validateUser();
          }]
        }
      })

根路由是公开的，但 /today 需要身份验证.也许这也足以让您继续使用 ui-router.旁注:我真的应该更新我的文章以说明 ui-router(或 Angular 的新路由器)，因为我认为没有多少人使用常规的旧 Angular 路由器.

The root route is public but /today requires authentication. Maybe that gives you enough to go on for ui-router as well. Side note: I should really update my article to account for ui-router (or Angular's new router) since I don't think many people use the regular old Angular router.

编辑:我从我的另一个项目中想起了这件事.这是 CoffeeScript.不相关的代码省略了.

Edit: I remembered this thing from a different project of mine. This is CoffeeScript. Irrelevant code omitted.

使用严格"

angular.module("fooApp", [
  "ngAnimate"
  "ngCookies"
  "ngResource"
  "ngRoute"
  "ngSanitize"
  "ngTouch"
  "ui.router"
  "ng-token-auth"
])
.run ($rootScope, $auth, $location) ->
  $rootScope.$on "auth:login-success", -> $location.path "/"
  $rootScope.$on "auth:logout-success", -> $location.path "/sign-in"
  $rootScope.$on "$stateChangeStart", (event, next) ->
    $auth.validateUser().then (->
      if $location.path() == "/"
        $location.path "/file-uploads"
    ), ->
      if !next.isPublic
        $location.path "/sign-in"

希望那里发生的事情是不言而喻的.这个项目确实使用了 ui-router，你可以从 $stateChangeStart 中看出.

Hopefully it's kind of self-evident what's going on there. This project DOES use ui-router, as you can tell from the $stateChangeStart.

这篇关于如何使用 AngularJS、Devise 和 UI 路由器全局实现身份验证?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！