angular-oauth2 —— NG 的 OAuth2 认证模块

简介:

angular-oauth2 详细介绍
angular-oauth2 是 AngularJS 的 OAuth2 认证模块,使用 ES6 编写。

使用方法:

  1. 引入 js 库:
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-cookie/dist/angular-cookie.min.js"></script>
<script src="bower_components/query-string/query-string.min.js"></script>
<script src="bower_components/angular-oauth2/dist/angular-oauth2.min.js"></script>

2 . 配置 OAuth 和 OAuthToken

angular.module('myApp', ['angular-oauth2'])
  .config(['OAuthProvider', function(OAuthProvider) {
    OAuthProvider.configure({
      baseUrl: 'https://api.website.com',
      clientId: 'CLIENT_ID',
      clientSecret: 'CLIENT_SECRET',
    });
  }]);

3 . 错误处理:

angular.module('myApp', ['angular-oauth2'])
  .run(['$rootScope', '$window', function($rootScope, $window) {
    $rootScope.$on('oauth:error', function(event, rejection) {
      // Ignore `invalid_grant` error - should be catched on `LoginController`.
      if ('invalid_grant' === rejection.data.error) {
        return;
      }

      // Redirect to `/login` with the `error_reason`.
      return $window.location.href = '/login?error_reason=' + rejection.data.error;
    });
  }]);

文章转载自 开源中国社区 [http://www.oschina.net]

相关文章
|
4月前
|
前端开发 容器
前端框架与库 - Angular模块与依赖注入
【7月更文挑战第17天】探索Angular的模块化和依赖注入:模块用于组织组件、服务等,通过`@NgModule`声明。依赖注入简化类间依赖管理,但面临模块重复导入、服务作用域不当和依赖循环等问题。解决策略包括规划模块结构、正确设置服务作用域和使用工厂函数打破循环依赖。遵循最佳实践,构建高效、可维护的Angular应用。
63 17
angular8-本地运行ng文档
angular8-本地运行ng文档
103 0
angular8-本地运行ng文档
|
缓存
Angular CLI找不到模块"angular-devkit/build-angular"
Angular CLI 是 Angular 客户端命令行工具,提供非常多的命令来简化 Angular 的开发。今天执行“ng serve”命令时,竟然报找不到模块"@angular-devkit/build-angular"的错误。
2403 0
|
Java
将Angular6自己定义的模块发布成npm包
创建自己的模块组件 1. ng new 一个工程 2. ng g m 创建模块 例如我这里的modules文件下创建header模块 3. ng g c modules/head 创建一个hear组件,内容随意 4.
2469 0
|
JavaScript Java
ANGULAR 使用 ng build --prod 编译报内存错误的解决办法
如果你遇到如下的情况 [13724:0000020D39C660D0] 231298 ms: Mark-sweep 1356.3 (1433.6) -> 1356.3 (1433.6) MB, 1194.
2664 0
Angular6之ng build | ng build --aot | ng build --prod 差异
由于写了大半年的项目终于要告一段落并且即将进行第二阶段优化开发,emmm 基础版本已经二十多个模块了,必不可少的优化是很重要的,尽管项目上使用多层嵌套懒加载,但是在首屏加载的时候,任然很慢啊,因为一直没有做严格编译,现在要编译啊,有点晚了,发现一堆报错,然后要一个坑一个坑慢慢踩过去了,今天做了试验,关于三种编译模式下的最终效果的对比,仅仅只是一个结果报告,至于原理这里先不做说明了。
2257 0
|
JavaScript 数据安全/隐私保护 API
第218天:Angular---模块和控制器
1、使用NG实现双边数据绑定 所有需要ng管理的代码必须被包裹在一个有ng-app指令的元素中ng-app是ng的入口,表示当前元素的所有指令都会被angular管理(对每一个指令进行分析和操作) 1 2 3 使用NG实现双边数据绑定 4 7 hello {{user.
1099 0
angular-cli ng build正常,ng build -prod报错怎么解决?
如题,版本信息: image ng build -prod报错:报的全是这种错,但是ng build就是正常的,难道不能AOT? image an 按照错误提示修改,继续打包
1429 0