【前后台分离模式下,使用OAuth Token方式认证】
AngularJS is an awesome javascript framework. With it’s $resource service it is super fast and easy to connect your javascript client to a RESTful API. It comes with some good defaults to create a CRUD interface.
However if you are using an API, which needs authentication via an auth token, you might run into issues: The resource factory creates a singleton. If you do not already have an auth token when the factory is called, or if the auth token changes afterwards, you cannot put the auth token as a default request parameter in the factory.
This article shows, how to solve this. First we define our resource, consuming a RESTful API, without using an authentication. Afterwards we create a wrapper to send the auth token with every request. This allows consumption of an API with an exchangeable auth token.
Build a RESTful resource
Here is a simple example of how to create a resource in your client, fed by a RESTful backend on your localhost:
angular.module('MyApp.services', ['ngResource'])
.factory('Todo', ['$resource',
function($resource) {
var resource =
$resource('http://localhost:port/todos/:id', {
port:":3001",
id:'@id'
}, {
update: {method: 'PUT'}
});
return resource;
}])
We are creating a module which depends on ngResource, which provides the $resource service. We build a factory called Todo using the $resource service.
Inside the factory we create a resource object by passing an URL and a port to the $resource constructor. Have a look at the URL string: :port and :id are being replaced by the parameters defined in the object literal right after the URL string itself.
Setting a port is not as straight forward, as it could be: In this example we are setting it to 3001. Right now you cannot put it into the URL directly, as AngularJS would interpret :3001 in the URL as a placeholder with the name3001. So we put the placeholder :port in the URL and replace it with :3001 via the parameter object literal.
Now have a look at the :id placeholder: It’s being replaced with @id. With the @ in front, AngularJS takes the attribute with that name from the current resource when doing a request. This is very handy, when sending non-GET request. Here is a simple example: When sending an update REST action for an resource item with id=123 the URL will look like this: http://localhost:3001/todos/123.
There is one last thing in the example: We define an update action for our resource. $resource defines some default actions:
{ 'get': {method:'GET'},
'save': {method:'POST'},
'query': {method:'GET', isArray:true},
'remove': {method:'DELETE'},
'delete': {method:'DELETE'} };
I have no idea, why an update action is missing. I think it would be reasonable to add this to the AngularJS default actions. So, as the update action is missing, we define it ourselves. We just have to provide the HTTP method for it, which is PUT.
As you can see, connecting to a REST API is pretty straight forward.
Send auth token with every request
To send the auth token with every request we are going to wrap the resource actions in a function which appends the auth token. So first of all we create a new service to deal with all the token related stuff:
.factory('TokenHandler', function() {
var tokenHandler = {};
var token = "none";
tokenHandler.set = function( newToken ) {
token = newToken;
};
tokenHandler.get = function() {
return token;
};
As you can see, we create a service called TokenHandler which stores the token itself and provides getter and setter methods.
Now, let’s have a look at the actual action wrapping:
// wraps given actions of a resource to send auth token
// with every request
tokenHandler.wrapActions = function( resource, actions ) {
// copy original resource
var wrappedResource = resource;
// loop through actions and actually wrap them
for (var i=0; i < actions.length; i++) {
tokenWrapper( wrappedResource, actions[i] );
};
// return modified copy of resource
return wrappedResource;
};
The method wrapAction takes a resource and an array with strings identifying the actions to be wrapped as parameters. A copy of the resource is created, modified and returned. We don’t want to change the original resource to prevent any side effects (‘Don’t change parameters inside a function’).
We loop through the actions array, calling the method tokenWrapper for every single action. So finally let us have a look what happens there:
// wraps resource action to send request with auth token
var tokenWrapper = function( resource, action ) {
// copy original action
resource['_' + action] = resource[action];
// create new action wrapping the original
// and sending token
resource[action] = function( data, success, error){
return resource['_' + action](
// call action with provided data and
// appended access_token
angular.extend({}, data || {},
{access_token: tokenHandler.get()}),
success,
error
);
};
};
return tokenHandler;
});
In a first step we copy the original action and store it with a new name. We prepend an underscore and save it into the resource. So the action query for example is now also available as _query.
Afterwards we overwrite the original action with our wrapper function. Parameters of the wrapper are identical with the normal actions: The resource data data and callback functions success and error.
The wrapper calls the renamed original action methods (_query for example) and returns the result. But checkout the first parameter we pass to the original action: We use the data parameter and append the access_token as an object literal to that. This way, the auth_token is send to the API as a parameter called access_token!
Usage of the token wrapper
Of course we have to actually use our new action wrapper in the resource we defined in the first section. So here is how to use it:
.factory('Todo', ['$resource', 'TokenHandler', function($resource, tokenHandler) {
var resource = $resource('http://localhost:port/todos/:id', {
port:":3001",
id:'@id'
}, {
update: {method: 'PUT'}
});
resource = tokenHandler.wrapActions( resource,
["query", "update", "save"] );
return resource;
}])
The TokenHandler has to be added as a dependency and is passed as a parameter to the constructor method. No changes to the definition of resource are necessary. But before returning resource we overwrite with the result formwrapActions method of the tokenHandler. We pass the original resource and an array with string identifying the actions we want to wrap.
As you can see we can easily overwrite the default actions which are created by $resource implicitly. You can use the overwritten actions the same way you would use the defaults:
// get all todos
var todos = Todo.query();
// save a todo
todo[0].text = "New Text";
todo[0].$save();
You can get the full code of the TokenHandler service here. This approach is based on an idea by Andy Joslin on a stackoverflow question. Thanks, Andy!
refer: http://nils-blum-oeste.net/angularjs-send-auth-token-with-every–request/
参考资料:
django-rest-framework-authentication:http://www.django-rest-framework.org/api-guide/authentication/
django-oauth-toolkit-Django Rest Framework-Getting started:https://django-oauth-toolkit.readthedocs.io/en/latest/rest-framework/getting_started.html
Token-Based Authentication With AngularJS & NodeJS:http://code.tutsplus.com/tutorials/token-based-authentication-with-angularjs-nodejs--cms-22543
Using a token-based authentication design over cookie-based authentication.:https://auth0.com/blog/2014/01/07/angularjs-authentication-with-cookies-vs-token/
RESTful API User Authentication with Node.js and AngularJS – Part 1/2: Server:https://devdactic.com/restful-api-user-authentication-1/
AngularJS: Send auth token with every request:http://chenpeng.info/html/2947
Angular中在前后端分离模式下实现权限控制 – 基于RBAC:http://chenpeng.info/html/3287
【前后台分离模式下,使用OAuth Token方式认证】的更多相关文章
- Spring Cloud实战 | 最八篇:Spring Cloud +Spring Security OAuth2+ Axios前后端分离模式下无感刷新实现JWT续期
一. 前言 记得上一篇Spring Cloud的文章关于如何使JWT失效进行了理论结合代码实践的说明,想当然的以为那篇会是基于Spring Cloud统一认证架构系列的最终篇.但关于JWT另外还有一个 ...
- AngularJS中在前后端分离模式下实现权限控制 - 基于RBAC
一:RBAC 百科解释: 基于角色的访问控制(Role-Based Access Control)作为传统访问控制(自主访问,强制访问)的有前景的代替受到广泛的关注.在RBAC中,权限与角色相关联,用 ...
- Epoll在LT和ET模式下的读写方式
在一个非阻塞的socket上调用read/write函数, 返回EAGAIN或者EWOULDBLOCK(注: EAGAIN就是EWOULDBLOCK) 从字面上看, 意思是:EAGAIN: 再试一次, ...
- Spring Security构建Rest服务-1300-Spring Security OAuth开发APP认证框架之JWT实现单点登录
基于JWT实现SSO 在淘宝( https://www.taobao.com )上点击登录,已经跳到了 https://login.taobao.com,这是又一个服务器.只要在淘宝登录了,就能直接访 ...
- Spring Security构建Rest服务-1200-SpringSecurity OAuth开发APP认证框架
基于服务器Session的认证方式: 前边说的用户名密码登录.短信登录.第三方登录,都是普通的登录,是基于服务器Session保存用户信息的登录方式.登录信息都是存在服务器的session(服务器的一 ...
- spring-oauth-server实践:授权方式四:client_credentials 模式下有效期内重复申请 access_token ?
spring-oauth-server入门(1-12)授权方式四:client_credentials 模式下有效期内重复申请 access_token ? 一.失效重建邏輯 二.如果沒有失效,不会重 ...
- flink on yarn模式下两种提交job方式
yarn集群搭建,参见hadoop 完全分布式集群搭建 通过yarn进行资源管理,flink的任务直接提交到hadoop集群 1.hadoop集群启动,yarn需要运行起来.确保配置HADOOP_HO ...
- MySQL-Front 出现“程序注册时间到期 程序将被限制模式下运行”解决方式
MySQL-Front 出现“程序注册时间到期 程序将被限制模式下运行”解决方式 在用mysql-front的时候遇到显示:程序注册时间到期程序将被限制模式下运行.可以在“帮助”菜单下的点“登记”-- ...
- spring-oauth-server实践:使用授权方式四:client_credentials 模式下access_token做业务!!!
spring-oauth-server入门(1-10)使用授权方式四:client_credentials 模式下access_token做业务!!! 准备工作 授权方式四::客户端方式: 服务网关地 ...
随机推荐
- IC卡文件系统的逻辑结构【转】
转自:http://bbs.ednchina.com/BLOG_ARTICLE_172028.HTM 文件系统是COS的重要模块之一,它负责组织.管理.维护IC卡内存储的所有数据.文件系统的设计和实现 ...
- [转]C++ 指针和引用
转自http://www.cnblogs.com/tangxiaobo199181/ 作者:算法生活 微信公众号:算法生活 出处:http://www.cnblogs.com/tangxiaobo19 ...
- 【C++】类内函数与内联函数
今天本来在休息,结果小伙伴问了我个问题,把我的三观都颠覆了.get到了新的知识点,这里记录一下. 内类的函数,都默认为是内联函数!! 这居然是真的.然后我就懵了.因为内联函数应该是定义在头文件里比较好 ...
- 【python】抄写大神的糗事百科代码
照着静觅大神的博客学习,原文在这:http://cuiqingcai.com/990.html 划重点: 1. str.strip() strip函数会把字符串的前后多余的空白字符去掉 2. resp ...
- solr 启动过程分析
http://www.cnblogs.com/likehua/p/4353608.html#top
- Combo Box的简单使用(Win32)
1 SendMessage函数向窗口发送消息 LRESULT SendMessage( HWND hWnd, // handle to destination window UINT Msg, ...
- 学习apache commons lang3的源代码 (1):前言和R
本系列主要是针对lang3的3.7版本的源代码进行学习,并适当举例.一共大概150多个java文件,争取30天内学习完毕. 26个英文字母 争取每天学习1个字母开头的类们. 今天,就学习R开头的吧. ...
- 架设Hmailserver+webmail邮件服务器
架设Hmailserver+webmail邮件服务器 在安裝Hmailserver前先安裝Apache.php.mysql,如果你想懶點直接到http://www.phpnow.org下載phpn ...
- Python:文件操作技巧(File operation)(转)
Python:文件操作技巧(File operation) 读写文件 # ! /usr/bin/python # -*- coding: utf8 -*- spath = " D:/dow ...
- 2018 ACM-ICPC 南京网络赛
Problem A Problem B Problem C Problem D Problem E Problem F Problem G Problem H Problem I Problem J ...