【源码】基于Angular CLI和Ant Design Mobile of Angular的前端认证系统

项目简介

本项目是基于Angular CLI和Ant Design Mobile of Angular开发的前端项目，具备登录认证、路由权限认证、HTTP请求拦截等功能，还提供了接口数据模拟示例，方便开发者在无后端服务的情况下进行测试。

项目的主要特性和功能

1. 登录认证：提供基本登录与身份信息认证流程，登录后可重定向到登录前拦截的页面。
2. 路由权限认证：提供基于路由的权限认证流程和方式。
3. HTTP请求拦截：对HTTP请求前后进行自定义处理，包括统一包装错误响应、修改请求URL、添加自定义URL前缀以及在请求头添加身份认证信息。
4. 错误页面：提供404和401页面。
5. 数据模拟：提供接口数据模拟方式示例，支持不依赖外部环境进行功能演示。

安装使用步骤

环境准备

1. 安装node.js，可从官网下载安装。
2. （可选）配置npm源以加速依赖安装： npm config set registry https://registry.npm.taobao.org npm config set disturl https://npm.taobao.org/dist
3. 安装angular脚手架工具： npm install -g @angular/cli
4. 安装项目依赖： npm install

运行项目

• 模拟运行：执行npm run mock，可在不依赖外部环境的情况下演示所有功能。
• 本地运行：执行ng serve --open，启动开发服务器并自动打开浏览器访问http://localhost:4200/。

项目编译

执行ng build编译并构建项目，编译后的文件存储在dist/目录中。使用--prod标记可进行生产环境的编译和构建。

测试

• 端到端测试：执行ng e2e通过Protractor执行端到端测试。

开发辅助

• 运行ng help可获得有关Angular CLI使用的更多帮助。
• 执行ng generate component component-name可创建新组件，也可使用ng generate directive|pipe|service|class|guard|interface|enum|module生成其他类型的文件。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】