文档章节

AngularJS 授权 + Node.js REST api

开源中国匿名会员
 开源中国匿名会员
发布于 2014/06/19 09:25
字数 1473
阅读 7131
收藏 13
点赞 3
评论 8

作者好屌啊,我不懂的他全都懂。

Authentication with AngularJS and a Node.js REST api


几个月前,我开始觉得 AngularJS 好像好牛逼的样子,于是我决定开始干它,并且录下来给你们看。BlogJS 就是第一发。

客户端 服务端

Blogjs 是个非常简单的 blog, 用 AngularJS,Node.js 和 MongoDB 写的。 你可以看看在线例子,点这里看前端,点这里看后台。用户名密码都是 demo 。

然后你还可以从 github 上拿源码

目的

这个工程的目的在于,学习怎么创建一个基于 AngularJS 的认证授权机制,以及一个运行在 Node.js 服务端上的 RESTful api。我们不能像原来那些老渣渣一样用 cookies 或者 session 来做验证机制。我们用18岁的 token 机制。

当用户把他的授权信息发过来的时候, Node.js 服务检查是否正确,然后返回一个基于用户信息的唯一 token 。 AngularJS 应用把 token 保存在用户的 SessionStorage ,之后的在发送请求的时候,在请求头里面加上包含这个 token 的 Authorization。如果 endpoint 需要确认用户授权,服务端检查验证这个 token,然后如果成功了就返回数据,如果失败了返回 401 或者其它的异常。另外, AngularJS 应用检查用户是否已经登陆,如果没有,重定向到 login 页面。

功能

  • 创建文章
  • 编辑文章
  • 删除文章
  • 发布文章
  • 撤回文章
  • 按日期显示文章
  • 按标签显示文章
  • 认证授权

用到的技术

  • AngularJS
  • Node.js(包括 express.js, express-jwt 和 moongoose)
  • MongoDB

客户端 : AngularJS 部分

首先,我们来创建我们的 AdminUserCtrl controller 和处理 login/logout 动作。

<!-- lang: js -->
appControllers.controller('AdminUserCtrl', ['$scope', '$location', '$window', 'UserService', 'AuthenticationService',
    function AdminUserCtrl($scope, $location, $window, UserService, AuthenticationService) {
 
        //Admin User Controller (login, logout)
        $scope.logIn = function logIn(username, password) {
            if (username !== undefined && password !== undefined) {
 
                UserService.logIn(username, password).success(function(data) {
                    AuthenticationService.isLogged = true;
                    $window.sessionStorage.token = data.token;
                    $location.path("/admin");
                }).error(function(status, data) {
                    console.log(status);
                    console.log(data);
                });
            }
        }
 
        $scope.logout = function logout() {
            if (AuthenticationService.isLogged) {
                AuthenticationService.isLogged = false;
                delete $window.sessionStorage.token;
                $location.path("/");
            }
        }
    }
]);

这个 controller 用了两个 service: UserService 和 AuthenticationService。第一个处理调用 REST api 用证书。后面一个处理用户的认证。它只有一个布尔值,用来表示用户是否被授权。

<!-- lang: js -->
appServices.factory('AuthenticationService', function() {
    var auth = {
        isLogged: false
    }
 
    return auth;
});
appServices.factory('UserService', function($http) {
    return {
        logIn: function(username, password) {
            return $http.post(options.api.base_url + '/login', {username: username, password: password});
        },
 
        logOut: function() {
 
        }
    }
});

好了,我们需要做张登陆页面:

<!-- lang: js -->
<form class="form-horizontal" role="form">
    <div class="form-group">
        <label for="inputUsername" class="col-sm-4 control-label">Username</label>
        <div class="col-sm-4">
            <input type="text" class="form-control" id="inputUsername" placeholder="Username" ng-model="login.email">
        </div>
    </div>
    <div class="form-group">
        <label for="inputPassword" class="col-sm-4 control-label">Password</label>
        <div class="col-sm-4">
            <input type="password" class="form-control" id="inputPassword" placeholder="Password" ng-model="login.password">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-4 col-sm-10">
            <button type="submit" class="btn btn-default" ng-click="logIn(login.email, login.password)">Log In</button>
        </div>
    </div>
</form>

当用户发送他的信息过来,我们的 controller 把内容发送到 Node.js 服务器,如果信息可用,我们把 AuthenticationService里面的 isLogged 设为 true。我们把从服务端发过来的 token 存起来,以便下次请求的时候使用。等讲到 Node.js 的时候我们会看看怎么处理。

好了,我们要往每个请求里面追加一个特殊的头信息了:[Authorization: Bearer <Stored Token>]。为了实现这个需求,我们建立一个服务,叫 TokenInterceptor。

<!-- lang: js -->
appServices.factory('TokenInterceptor', function ($q, $window, AuthenticationService) {
    return {
        request: function (config) {
            config.headers = config.headers || {};
            if ($window.sessionStorage.token) {
                config.headers.Authorization = 'Bearer ' + $window.sessionStorage.token;
            }
            return config;
        },
 
        response: function (response) {
            return response || $q.when(response);
        }
    };
});

然后我们把这个interceptor 追加到 $httpProvider :

<!-- lang: js -->
app.config(function ($httpProvider) {
    $httpProvider.interceptors.push('TokenInterceptor');
});

然后,我们要开始配置路由了,让 AngularJS 知道哪些需要授权,在这里,我们需要检查用户是否已经被授权,也就是查看 AuthenticationService 的 isLogged 值。

<!-- lang: js -->
app.config(['$locationProvider', '$routeProvider',
  function($location, $routeProvider) {
    $routeProvider.
        when('/', {
            templateUrl: 'partials/post.list.html',
            controller: 'PostListCtrl',
            access: { requiredLogin: false }
        }).
        when('/post/:id', {
            templateUrl: 'partials/post.view.html',
            controller: 'PostViewCtrl',
            access: { requiredLogin: false }
        }).
        when('/tag/:tagName', {
            templateUrl: 'partials/post.list.html',
            controller: 'PostListTagCtrl',
            access: { requiredLogin: false }
        }).
        when('/admin', {
            templateUrl: 'partials/admin.post.list.html',
            controller: 'AdminPostListCtrl',
            access: { requiredLogin: true }
        }).
        when('/admin/post/create', {
            templateUrl: 'partials/admin.post.create.html',
            controller: 'AdminPostCreateCtrl',
            access: { requiredLogin: true }
        }).
        when('/admin/post/edit/:id', {
            templateUrl: 'partials/admin.post.edit.html',
            controller: 'AdminPostEditCtrl',
            access: { requiredLogin: true }
        }).
        when('/admin/login', {
            templateUrl: 'partials/admin.login.html',
            controller: 'AdminUserCtrl',
            access: { requiredLogin: false }
        }).
        when('/admin/logout', {
            templateUrl: 'partials/admin.logout.html',
            controller: 'AdminUserCtrl',
            access: { requiredLogin: true }
        }).
        otherwise({
            redirectTo: '/'
        });
}]);
 
app.run(function($rootScope, $location, AuthenticationService) {
    $rootScope.$on("$routeChangeStart", function(event, nextRoute, currentRoute) {
        if (nextRoute.access.requiredLogin && !AuthenticationService.isLogged) {
            $location.path("/admin/login");
        }
    });
});

服务端: Node.js + MongoDB 部分

为了在我们的 RESTful api 处理授权信息,我们要用到 express-jwt (JSON Web Token) 来生成一个唯一 Token,基于用户的信息。以及验证 Token。

首先,我们在 MongoDB 里面创建一个用户的 Schema。我们还要创建调用一个中间件,在创建和保存用户信息到数据库之前,用于加密密码。还有我们需要一个方法来解密密码,当收到用户请求的时候,检查是否在数据库里面有匹配的。

<!-- lang: js -->
var Schema = mongoose.Schema;

// User schema
var User = new Schema({
    username: { type: String, required: true, unique: true },
    password: { type: String, required: true}
});
 
// Bcrypt middleware on UserSchema
User.pre('save', function(next) {
  var user = this;
 
  if (!user.isModified('password')) return next();
 
  bcrypt.genSalt(SALT_WORK_FACTOR, function(err, salt) {
    if (err) return next(err);
 
    bcrypt.hash(user.password, salt, function(err, hash) {
        if (err) return next(err);
        user.password = hash;
        next();
    });
  });
});
 
//Password verification
User.methods.comparePassword = function(password, cb) {
    bcrypt.compare(password, this.password, function(err, isMatch) {
        if (err) return cb(err);
        cb(isMatch);
    });
};

然后我们开始写授权用户和创建 Token 的方法:

<!-- lang: js -->
exports.login = function(req, res) {
    var username = req.body.username || '';
    var password = req.body.password || '';
 
    if (username == '' || password == '') {
        return res.send(401);
    }
 
    db.userModel.findOne({username: username}, function (err, user) {
        if (err) {
            console.log(err);
            return res.send(401);
        }
 
        user.comparePassword(password, function(isMatch) {
            if (!isMatch) {
                console.log("Attempt failed to login with " + user.username);
                return res.send(401);
            }
 
            var token = jwt.sign(user, secret.secretToken, { expiresInMinutes: 60 });
 
            return res.json({token:token});
        });
 
    });
};

最后,我们需要把 jwt 中间件加到所有的,访问时需要授权的路由上面:

<!-- lang: js -->
/*
Get all published posts
*/
app.get('/post', routes.posts.list);
/*
    Get all posts
*/
app.get('/post/all', jwt({secret: secret.secretToken}), routes.posts.listAll);
 
/*
    Get an existing post. Require url
*/
app.get('/post/:id', routes.posts.read);
 
/*
    Get posts by tag
*/
app.get('/tag/:tagName', routes.posts.listByTag);
 
/*
    Login
*/
app.post('/login', routes.users.login);
 
/*
    Logout
*/
app.get('/logout', routes.users.logout);
 
/*
    Create a new post. Require data
*/
app.post('/post', jwt({secret: secret.secretToken}), routes.posts.create);
 
/*
    Update an existing post. Require id
*/
app.put('/post', jwt({secret: secret.secretToken}), routes.posts.update);
 
/*
    Delete an existing post. Require id
*/
app.delete('/post/:id', jwt({secret: secret.secretToken}), routes.posts.delete);

现在你的应用就只对授权用户开放了。如果你有什么问题的话,射我一tweet: @kdelemme 。

© 著作权归作者所有

共有 人打赏支持
开源中国匿名会员
粉丝 78
博文 104
码字总数 113453
作品 2
徐汇
技术主管
加载中

评论(8)

404-网页不存在
404-网页不存在
想问个问题:jwt把生成的token放在header里面,通过抓包软件一下子就抓到了这个token,这样token不就泄露了吗?这里要怎么处理呢?
黄晟楠
黄晟楠
请问这样能支持 跨站攻击吗?
e
ethan0205
如果用浏览器自带的前进后退的话 token不就变成旧的吗? 怎么获取新的token?
LymanLai
LymanLai

引用来自“lyp0110”的评论

请问这个token如何从服务端删除呢?退出的时候你只是从sessionStore里面删除了。还有如何只写一次验证啊?不能每次都在请求上加jwt({secret: secret.secretToken})吧?

引用来自“开源中国匿名会员”的评论

你要想退出的時候刪那就發個請求過去就行了。 不刪也沒啥,本來就是客戶端拿到一個授權,每次拿來跟服務端匹配, 如果過期了,再重新授權一次更新掉。 寫一次規則對所有的路由都適用這個你看Express就好了。
jwt服务器没法过期的哦,解决方案是客户端logout的时候,向服务器端发个请求,服务器端把这个jwt加入到redis或者mongodb里面得一个过期队列里面,然后jwt验证的时候,先检索这个jwt是不是已经被扔到过期队里里面了,是的话,就直接返回401不用jwt再去验证是否合法了。最后直到jwt过期时间到,则可以把redis里面的对应的jwt删除了,因为这个条目不需要再而外验证而jwt本身验证的时候就是过期的了。
开源中国匿名会员
开源中国匿名会员

引用来自“lyp0110”的评论

请问这个token如何从服务端删除呢?退出的时候你只是从sessionStore里面删除了。还有如何只写一次验证啊?不能每次都在请求上加jwt({secret: secret.secretToken})吧?
你要想退出的時候刪那就發個請求過去就行了。 不刪也沒啥,本來就是客戶端拿到一個授權,每次拿來跟服務端匹配, 如果過期了,再重新授權一次更新掉。 寫一次規則對所有的路由都適用這個你看Express就好了。
l
lyp0110
请问这个token如何从服务端删除呢?退出的时候你只是从sessionStore里面删除了。还有如何只写一次验证啊?不能每次都在请求上加jwt({secret: secret.secretToken})吧?
开源中国匿名会员
开源中国匿名会员

引用来自“曹欢欢”的评论

这个token过期了怎么办
过期?过期再取呗。你玩腾讯游戏的时候过那么久不上游戏不得重新认证一次么。
曹欢欢
曹欢欢
这个token过期了怎么办
使用Yeoman快速构建基于angular的web应用

前言 最近在学习使用安哥拉(angular.js)编写web应用,看了一些网友实践了解到yeoman,这个工具实在太好用了,必须在这里介绍一下。 angular 首先简单介绍一下angular,它是由google开源的一套...

snakelxc
2013/08/25
0
0
使用Yeoman快速构建基于angular的web应用

前言 最近在学习使用安哥拉(angular.js)编写web应用,看了一些网友实践了解到yeoman,这个工具实在太好用了,必须在这里介绍一下。 angular 首先简单介绍一下angular,它是由google开源的一套...

kisops
2013/08/25
0
0
Mac环境 部署Node.js环境 安装Angular CLI 解决找不到ng命令的问题

Mac环境 部署Node.js环境 安装Angular CLI 解决找不到ng命令的问题 2018年02月08日 23:34:56 阅读数:207 写这篇博客的原因是本人最近在学习AngularJS 公司环境是Ubuntu 家里环境是macOS 公司...

一真的鱼
05/09
0
0
用 Socket.io 处理 NodeJS 和 AngularJS 间的 tweet

这篇文章里面,我们学习一下,怎么用 Socket.io 来流化处理一些旧金山周边的 tweet,在 nodejs 应用和 angularjs 应用之间。我们为了从 nodejs 应用拿到 tweet, 我们用的是 Twitter API 的 ...

开源中国匿名会员
2014/06/19
0
0
用 Redis 处理 jsonwebtoken 生成的 Token

作者好牛逼啊,我不懂的他全都懂。 [Use Redis to revoke Tokens generated from jsonwebtoken][1] 在[前面][2]一篇文章中,我讲述了怎么用 AngularJS 和 NodeJS 通过 jsonwebtoken 做用户验...

开源中国匿名会员
2014/06/19
0
2
如何搭建angular开发环境

角开发环境需要安装三种软件: Node.js和Angular CLI,WebStrom(我使用的是这个,所以就按这个来讲) 1.展示进入首先网址这个https://nodejs.org/en/download/下载对应的的Node.js和NPM(注...

xnh_565175944
05/19
0
0
AngularJS 2014-10-22

前台代码起来越多,需要用一种更高效方式整合 MVC只是手段,终极目标是模块化和复用 第一部分:快速上手 1.1 感受AngularJS的4大核心特性 1.2 搭建开发、调试、测试环境 第二部分:基本概念和...

jayronwang
2014/10/22
0
0
【Angular】之Angular环境搭建

前言 小编最近在学习angular的内容,万事开头难,完成了开头也便成功了一半。这句话小编在这次的学习实践之旅中,深有体会,下面小编就来讲一讲,angular环境搭建之旅吧! 一、环境搭建 1.下...

m18633778874
05/08
0
0
构建你的Office 365开发环境 - 其他版本

博客地址:http://blog.csdn.net/FoxDave 本文介绍如何搭建Android版、Angular和ASP.NET版本的Office 365开发环境,其跟IOS版的区别主要在第一部分下载安装开发工具上,Office 365端的配置都...

justinliu927
04/23
0
0
AngularJS:跟随官方教程,一起构建一个简单的项目

AngularJS大白话简介: AngularJS是一个前端框架,和Bootstrap不同,他是一个为了构建 单页应用 而诞生的。Bootstrap是为了解决CSS样式和一些简单的互动(主要是提供了各种各样的样式,我们直...

那就远走
05/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

shell及python脚本方式登录服务器

一、问题 在工作过程中,经常会遇见需要登录服务器,并且因为安全的原因,需要使用交互的方式登录,而且shell、python在工作中也经常用到,并且可以提供交互的功能。都是利用了expect、spawn...

yangjianzhou
4分钟前
0
0
upstream sent too big header while reading...

nginx 报错:1736 upstream sent too big header while reading response header from upstream 1. 一般处理 location ~ \.php$ { #增加下面两句 fastcgi_buffer_size 128k; ......

dubox
15分钟前
0
0
Python解析配置文件模块:ConfigPhaser

import configparser as pa# [SectionA]# a = aa# b = bb# c = cc# [SectionB]# optionint = 1# optionfloat = 1.1# optionstring = string#https://www.cnblogs.com/a......

易野
22分钟前
0
0
Java基础——面向对象

声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权;凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。 Object的方法: clone() Object 克隆 to Strin...

凯哥学堂
24分钟前
0
0
rabbitmq学习记录(八)消息发布确认机制

RabbitMQ服务器崩了导致的消息数据丢失,已经持久化的消息数据我们可以通过消息持久化来预防。但是,如果消息从生产者发送到vhosts过程中出现了问题,持久化消息数据的方案就无效了。 Rabbit...

人觉非常君
28分钟前
0
0
毕业5年,我是怎么成为年薪30W的运维工程师

#转载# 我在大学读的是计算机专业,但大学毕业之后,进入到一家私企进行工作,工作的内容类似于网管,会经常的去修电脑,去做水晶头等内容。刚开始工作,也没想太多,最想的是丰富自己的工作...

Py爱好
35分钟前
1
0
大数据基础知识,大数据学习,涉及的知识点

一、什么是大数据 一种规模大到在获取、存储、管理、分析方面大大超出了传统数据库软件工具能力范围的数据集合,具有海量的数据规模、快速的数据流 转、多样的数据类型和价值密度低四大特征。...

董黎明
50分钟前
0
0
Linux CentOS 7上安装极点五笔

话说几天前在新买的惠普笔记本上成功地安装了Linux CentOS 7操作系统、Nvidia Quandro P600驱动程序及X Window,并在VMware下安装Red Hat教学环境,彻底跳出Windows的苦海,但仍然有一件事不...

大别阿郎
今天
17
0
2018年7月20日集群课程

一、集群介绍 集群,简单地说是指一组(若干个)相互独立的计算机,利用高速通信网络组成一个较大的计算机服务系统,每个集群节点(即集群中的每台计算机)都是运行各自服务的独立服务器。 ...

人在艹木中
今天
0
0
spark开发机中调试snappy

目的 在Idea中的点击运行,使spark可以直接读取snappy 自己编译hadoop,以支持snappy的压缩。 自己编译的目的就是要得到支持snappy文件读写的动态链接库。如果可以在网上下载,可以跳过自行编...

benny周
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部