Angular 2/5 JWT 认证示例项目教程

最新推荐文章于 2024-11-20 14:18:47 发布

田轲浩

最新推荐文章于 2024-11-20 14:18:47 发布

阅读量876

点赞数 19

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00703/article/details/141581850

Angular 2/5 JWT 认证示例项目教程

angular2-jwt-authentication-exampleAngular 2/5 JWT Authentication Example项目地址:https://gitcode.com/gh_mirrors/an/angular2-jwt-authentication-example

1. 项目的目录结构及介绍

angular2-jwt-authentication-example/
├── app/
│   ├── app.component.css
│   ├── app.component.html
│   ├── app.component.ts
│   ├── app.module.ts
│   ├── auth.guard.ts
│   ├── auth.interceptor.ts
│   ├── login.component.ts
│   ├── register.component.ts
│   ├── user.service.ts
│   └── users.component.ts
├── index.html
├── package.json
├── systemjs.config.js
├── tsconfig.json
└── README.md

目录结构介绍

app/: 包含所有Angular组件、服务和模块。
- app.component.*: 主组件的样式、模板和逻辑。
- app.module.ts: 应用的根模块。
- auth.guard.ts: 认证守卫，用于保护路由。
- auth.interceptor.ts: HTTP拦截器，用于在每个请求中添加JWT。
- login.component.ts: 登录组件。
- register.component.ts: 注册组件。
- user.service.ts: 用户服务，处理用户数据和认证逻辑。
- users.component.ts: 用户列表组件。
index.html: 应用的入口HTML文件。
package.json: 项目依赖和脚本配置。
systemjs.config.js: SystemJS配置文件，用于模块加载。
tsconfig.json: TypeScript编译配置。
README.md: 项目说明文档。

2. 项目的启动文件介绍

index.html

<!DOCTYPE html>
<html>
<head>
    <base href="/">
    <title>Angular 2/5 JWT Authentication Example</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="app.css">
</head>
<body>
    <app-root></app-root>
    <script src="systemjs.config.js"></script>
    <script>
        System.import('app').catch(function(err){ console.error(err); });
    </script>
</body>
</html>

启动文件介绍

index.html: 应用的入口文件，包含应用的根组件<app-root>和SystemJS配置。
System.import('app'): 使用SystemJS加载应用的根模块。

3. 项目的配置文件介绍

package.json

{
  "name": "angular2-jwt-authentication-example",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "tsc": "tsc",
    "tsc:w": "tsc -w"
  },
  "dependencies": {
    "@angular/common": "~2.4.0",
    "@angular/compiler": "~2.4.0",
    "@angular/core": "~2.4.0",
    "@angular/forms": "~2.4.0",
    "@angular/http": "~2.4.0",
    "@angular/platform-browser": "~2.4.0",
    "@angular/platform-browser-dynamic": "~2.4.0",
    "@angular/router": "~3.4.0",
    "core-js": "^2.4.1",
    "rxjs": "5.0.1",
    "systemjs": "0.19.40",
    "zone.js": "^0.7.4"
  },
  "devDependencies": {
    "@types/node": "^6.0.46",
    "concurrently": "^3.1.0",
    "lite-server": "^2.2.2",
    "typescript": "^2.0.10"
  }
}

angular2-jwt-authentication-exampleAngular 2/5 JWT Authentication Example项目地址:https://gitcode.com/gh_mirrors/an/angular2-jwt-authentication-example

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考