1

我想知道这样的方法是否

（这是一个非常微不足道的例子）

可能是管理的起点

angularjs + 用户认证

<!DOCTYPE html>
<html>
    <head>
        <title>My auth test</title>
    </head>
    <body>
    <div data-ng-app="myApp">
         <div data-ng-view></div>
    </div>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script>
        var app = angular.module('myApp', []);
        app.factory('Devs', function() {
            var data = [{name:'Joe',auth:false},{name:'Whisher',auth:true}];
            return data;
        });
        app.factory('Projects', function() {
            var data = [{name:'Php'},{name:'Javascript'}];
            return data;
        });
        app.config(function($routeProvider) {
            $routeProvider.
                when('/', {
                    controller: 'OneCtrl',
                    resolve: {
                        projects: function(Projects) {
                            return Projects;
                        }
                    },
                    templateUrl:'./view.html'
                }).
                when('/one', {
                    controller: 'OneCtrl',
                    resolve: {
                        projects: function(Projects) {
                            return Projects;
                        }
                    },
                    templateUrl:'./view.html'
                }).
                when('/two', {
                    controller: 'TwoCtrl',
                    resolve: {
                        projects: function(Projects) {
                            return Projects;
                        }
                    },
                    templateUrl:'./view.html'
                })
                .otherwise({redirectTo:'/'});

        });
        app.controller('OneCtrl',function($scope,Devs, projects) {
            $scope.project = projects[0];
            $scope.dev = Devs[0];
        });
        app.controller('TwoCtrl',function($scope,Devs, projects) {
            $scope.project = projects[1];
            $scope.dev = Devs[1];
        });
        app.directive('checkAuth',function($location){
            return {
                link:function(scope){
                    scope.$on('$routeChangeSuccess', function(next, current) { 
                        if(!scope.dev.auth){    
                            $location.path('/');
                        }
                    });
                }
            }
        });
    </script>
    </body>
    </html>

在视图中

<div check-auth>
<p>{{project.name}}</p>
 <div><a ng-href="./#/one">one</a></div>
 <div><a ng-href="./#/two">two</a></div>
 <div>

您只能在需要身份验证的视图中使用该指令。

你有什么想法 ？我对一些链接也很满意:)

4

2 回答 2

1

我目前正在学习 Angular JS。有一天我做了这个：

app.factory("user", function($http, $q) {

  var user = {};

  // query logged in status on initial page load
  $http.get("/loggedin").success(function() {
    user.isLogged = true;
  }).error(function() {
    user.isLogged = false;
  });

  user.login = function(username, password) {
    var defer = $q.defer();
    if(user.isLogged) {
        defer.resolve("Already logged in");
        return defer.promise;
    }
    $http.post("/login", {username: username, password: password})
      .success(function() {
        user.isLogged = true;
        defer.resolve("User login success");
      })
      .error(function() {
        defer.reject("User login failed");
      })
    return defer.promise;
  }

  user.logout = function() {
    var defer = $q.defer();
    $http.post("/logout", {})
      .success(function() {
        // sucessfully logged out
        user.isLogged = false;
        defer.resolve();
      }).error(function() {
        // unable to logout for some reason
        defer.reject();
      });
    return defer.promise;
  }

  return user;
});

这是 Node JS 中的服务器端：

module.exports = function(app) {

    // GET users
    app.get('/users', function(req, res, next) {
        async.parallel([
            function(next) {
                User.count(next);
            },
            function(next) {
                // get all users (within specified query parameters)
                var query = User.find({});
                restUtil.setSort(query, req);
                restUtil.setLimits(query, req);
                query.exec(next);
            }
        ], function(err, results) { // final callback
            if(err) {
                return next(err);
            }

            var count = results[0];
            var users = results[1];

            // add total number as header (for pagination, etc)
            res.set('total', count); 

            res.json(users);
        });
    });

    // POST a new user
    app.post('/users', hashPassword, function(req, res, next) {

        User.create(req.body, function(err, user) {
            if(err) {
                if(err.code===11000) {
                    res.send("Conflict", 409);
                } else {
                    next(err);
                }
            }
            res.json(user);
        });
    });

  // POST a login request
  app.post("/login", loadUserByUsername, function(req, res, next) {

    bcrypt.compare(req.body.password, req.user.passwordHash, function(err, ok) {
      if(ok) {
        req.session.user = req.user; // logged in
        res.send("Login ok", 200);
      } else {
        // incorrect password
        res.send("Incorrect password", 400);
      }
    })
  })

  // POST a logout request
  app.post("/logout", function(req, res, next) {
    req.session.destroy();
    res.send(200);
  })

  // GET logout status
  app.get("/loggedIn", function(req, res, next) {
    if(req.session.user) {
      res.send("Logged in", 200);
    } else {
      res.send("Not Logged in", 400)
    }
  })


  app.delete("/users/:_id", loadUserById, function(req, res, next) {
    User.remove({ _id: req.params._id }, function(err) {
      if(err) {
        res.send("An error occurred", 404);
      } else {
        res.send("Delete Success", 200);
      }
    });
  });
};

到目前为止还没有更进一步，但到目前为止我喜欢客户端代码。没有过多考虑用户角色等，但这应该可以帮助您入门。添加进一步的承诺来解决问题并不难。resolve: user.login可以满足很多需求。

您还可以查看此博客文章

于 2013-08-15T18:17:19.997 回答
1

我创建了一个AngularJS 模块用于支持受保护/公共路由的用户身份验证、登录/注销时重新路由、状态检查的心跳、将会话令牌存储在 cookie 中、注册/登录/注销的指令等。

它是为UserApp（一个基于云的用户管理 API）构建的，但它可以很容易地附加到您自己的 API。如果您使用 UserApp，则无需为用户内容编写任何服务器端代码。参加Codecademy 上的课程来尝试一下。

https://github.com/userapp-io/userapp-angular

以下是它如何工作的一些示例：

  • 如何指定哪些路由应该是公开的，哪些路由是登录表单：

    $routeProvider.when('/login', {templateUrl: 'partials/login.html', public: true, login: true});
$routeProvider.when('/signup', {templateUrl: 'partials/signup.html', public: true});
$routeProvider.when('/home', {templateUrl: 'partials/home.html'});

    .otherwise()路由应设置为您希望用户在登录后重定向的位置。例子：

    $routeProvider.otherwise({redirectTo: '/home'});

  • 带有错误处理的登录表单：

    <form ua-login ua-error="error-msg">
    <input name="login" placeholder="Username"><br>
    <input name="password" placeholder="Password" type="password"><br>
    <button type="submit">Log in</button>
    <p id="error-msg"></p>
</form>

  • 带有错误处理的注册表单：

    <form ua-signup ua-error="error-msg">
  <input name="first_name" placeholder="Your name"><br>
  <input name="login" ua-is-email placeholder="Email"><br>
  <input name="password" placeholder="Password" type="password"><br>
  <button type="submit">Create account</button>
  <p id="error-msg"></p>
</form>

  • 退出链接：

    <a href="#" ua-logout>Log Out</a>

    （结束会话并重定向到登录路由）

  • 访问用户属性：

    使用服务访问用户属性user，例如：user.current.email

    或者在模板中：<span>{{ user.email }}</span>

  • 隐藏仅在登录时才可见的元素：

    <div ng-show="user.authorized">Welcome {{ user.first_name }}!</div>

  • 根据权限显示一个元素：

    <div ua-has-permission="admin">You are an admin</div>

并且要对您的后端服务进行身份验证，只需使用user.token()获取会话令牌并将其与 AJAX 请求一起发送。在后端，使用UserApp API（如果您使用 UserApp）来检查令牌是否有效。

希望这能回答你的问题。如果您需要任何帮助，请告诉我：）

于 2013-12-21T14:49:43.660 回答