Javascript 使用angularjs管理用户身份验证_Javascript_Angularjs_Angularjs Directive

Javascript 使用angularjs管理用户身份验证

javascript angularjs

Javascript 使用angularjs管理用户身份验证,javascript,angularjs,angularjs-directive,Javascript,Angularjs,Angularjs Directive,我想知道这样的方法（这是一个非常简单的例子）可能是管理的起点 angularjs+用户身份验证 <!DOCTYPE html> <html> <head> <title>My auth test</title> </head> <body> <div data-ng-app="myApp"> <div data-ng-view

我想知道这样的方法

（这是一个非常简单的例子）

可能是管理的起点

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>


我的身份验证测试
var-app=angular.module（'myApp'，[]）；
app.factory（'Devs'，function（）{
var data=[{name:'Joe'，auth:false}，{name:'Whisher'，auth:true}]；
返回数据；
});
应用程序工厂（'项目'，功能（）{
var data=[{name:'Php'}，{name:'Javascript'}]；
返回数据；
});
app.config（函数（$routeProvider）{
$routeProvider。
当（“/”{
控制器：“OneCtrl”，
决心：{
项目：职能（项目）{
返回项目；
}
},
templateUrl:“./view.html”
}).
当（“/one”{
控制器：“OneCtrl”，
决心：{
项目：职能（项目）{
返回项目；
}
},
templateUrl:“./view.html”
}).
当（“/two”{
控制器：“TwoCtrl”，
决心：{
项目：职能（项目）{
返回项目；
}
},
templateUrl:“./view.html”
})
。否则（{重定向到：'/'}）；
});
app.controller（'OneCtrl'，函数（$scope，Devs，projects）{
$scope.project=项目[0]；
$scope.dev=Devs[0]；
});
app.controller（'TwoCtrl'，函数（$scope，Devs，projects）{
$scope.project=项目[1]；
$scope.dev=Devs[1]；
});
应用程序指令（'checkAuth'，函数（$location）{
返回{
链接：功能（范围）{
作用域.$on（“$routeChangeSuccess”，函数（下一个，当前）{
如果（！scope.dev.auth）{
$location.path（'/'）；
}
});
}
}
});

在视图中

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


{{project.name}

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

你觉得怎么样？

我对一些链接也很满意：）

我目前正在学习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);
      }
    });
  });
};

到目前为止，我还没有做得更进一步，但到目前为止我喜欢客户端代码。没有考虑过用户角色等，但这应该可以让您开始。增加更多的承诺来解决这些问题并不困难<代码>解析：user.login可以满足很多需求

您也可以查看此

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

它是为（一个基于云的用户管理API）而构建的，但是它可以很容易地连接到您自己的API。如果您使用UserApp，则不必为用户编写任何服务器端代码。拿这个试试

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

如何指定哪些路由应该是公共的，以及哪个路由是登录表单：

$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'});

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

.others（）

路由应设置为您希望用户在登录后重定向到的位置。例如：

$routeProvider.other（{重定向到：'/home'}）


带有错误处理的登录表单：
$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'});

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






登录


带有错误处理的注册表单：
$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'});

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








创建帐户


注销链接：
$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'});

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


（结束会话并重定向到登录路由）
访问用户属性：
$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'});

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

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

或者在模板中：{{user.email}

隐藏仅在登录时可见的元素：
$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'});

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

欢迎{{user.first_name}

基于权限显示元素：
$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'});

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

您是管理员


要对后端服务进行身份验证，只需使用user.token（）
获取会话令牌并将其与AJAX请求一起发送即可。在后端，使用（如果使用UserApp）检查令牌是否有效
希望这能回答你的问题。如果您需要帮助，请告诉我：）
这个问题似乎离题了，因为它是关于代码的review@Stewie我只是想知道如何通过angularjs和所有示例代码管理用户身份验证。这只是一个想法，我想检查一下这是否是一个好主意^^