APP-HealthTrack/AppWeb/src/modules/user

用户模块

功能结构

• 用户模块

• 模块内功能

  • 页面
    • 登录/注册
      • 用户的注册及登录
        • 忘记密码
    • 资料编辑
      • 文字
      • 图片编辑
    • 我的
      • 登陆状态
        • 登录
          • 会员卡片
        • 未登录
          • 占位卡片

• 模块外功能

  • 限制访问
    • 路由守卫
  • 数据关联
    • 读取当前用户数据
      • localStorage
        • 本地存储
    • 由XXX用户创建的

安装依赖

npm i -S parse
npm i -D @types/parse

配置 根目录/tsconfig.json

  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
  }

设置微服务地址+参数

• app.component.ts 根组件顶部增加

  // 引用Parse JS SDK
  import Parse from "parse";
  Parse.initialize("dev"); // 设置applicationId
  Parse.serverURL = "http://web2023.fmode.cn:9999/parse"; // 设置serverURL
  

复制user整个模块目录

• 创建/src/modules目录
• 将案例项目/src/modules/user目录，复制到自己项目/src/modules/user

配置全局user路由

src\app\app-routing.module.ts

const routes: Routes = [
  // 添加：
  {
    path: 'user',
    loadChildren: () => import('../modules/user/user.module').then(m => m.UserModule)
  }
];

配置单页Tabs我的路由

• src\app\tabs\tabs-routing.module.ts

  // 新增在tab3后面
  {
      path: 'mine',
      loadChildren: () => import('../../modules/user/mine/mine.module').then(m => m.MinePageModule)
  },
  

• src\app\tabs\tabs.page.html

  <ion-tab-button tab="mine" href="/tabs/mine">
    <ion-icon aria-hidden="true" name="person"></ion-icon>
    <ion-label>我的</ion-label>
  </ion-tab-button>
  

路由守卫 AuthGuard用法

// 引用路由守卫
import { authGuard } from 'src/modules/user/auth.guard';



{
        path: 'tab2',
        // 此处增加路由守卫
        canActivate:[authGuard],
        loadChildren: () => import('../../modules/contact/contact-list/contact-list.module').then(mod => mod.ContactListPageModule)
    },