Angular-JWT 使用教程

Angular-JWT 使用教程

angular-jwtLibrary to help you work with JWTs on AngularJS项目地址:https://gitcode.com/gh_mirrors/an/angular-jwt

项目介绍

Angular-JWT 是一个帮助你在 AngularJS 应用中处理 JSON Web Tokens (JWT) 的库。它简化了认证和授权过程，提升了用户体验，并促进了不同服务之间的无缝导航，同时高度重视安全性。

项目快速启动

安装

你可以通过 Bower 或 npm 安装 Angular-JWT：

bower install angular-jwt
# 或
npm install angular-jwt

引入和配置

在你的 HTML 文件中引入安装的文件：

<script src="path/to/angular-jwt.js"></script>

在你的 Angular 模块中引入 angular-jwt 模块并进行配置：

angular.module('app', ['angular-jwt'])
  .config(function Config($httpProvider, jwtOptionsProvider) {
    jwtOptionsProvider.config({
      whiteListedDomains: [/^api-version-\d+\.myapp\.com$/i, 'localhost']
    });
  });

使用 JWT

在你的服务或控制器中使用 JWT：

angular.module('app')
  .controller('MainCtrl', function($scope, jwtHelper) {
    var token = 'your.jwt.token';
    var decodedToken = jwtHelper.decodeToken(token);
    var expirationDate = jwtHelper.getTokenExpirationDate(token);
    var isExpired = jwtHelper.isTokenExpired(token);
  });

应用案例和最佳实践

自动发送 JWT

使用拦截器自动将 JWT 添加到每个请求中：

angular.module('app')
  .config(function($httpProvider) {
    $httpProvider.interceptors.push('jwtInterceptor');
  });

避免发送 JWT 给模板请求

如果你不想在模板请求中发送 JWT，可以调整 tokenGetter 方法：

jwtOptionsProvider.config({
  tokenGetter: function(options) {
    if (options.url.indexOf('template') > -1) {
      return null;
    }
    return localStorage.getItem('id_token');
  }
});

典型生态项目

@auth0/angular-jwt

这是一个更现代的 Angular 库，用于处理 JWT：

npm install @auth0/angular-jwt

@angular/common/http

Angular 的 HTTP 模块，用于处理 HTTP 请求：

npm install @angular/common/http

通过这些工具，你可以更高效地在 Angular 应用中实现 JWT 认证。

angular-jwtLibrary to help you work with JWTs on AngularJS项目地址:https://gitcode.com/gh_mirrors/an/angular-jwt