Angular开发：实现独立登录页 登录前隐藏其他组件 登录后跳转

一、tab-view直接放在app.component中是否为合理实现方式？ #

• 不合理。app.component是Angular应用的根组件，应用启动后会始终常驻渲染，你把tab导航写在这里，不管当前路由是登录页还是业务页，导航都会全局显示，这就是你现在登录页漏出顶部导航的直接原因。只有当你所有页面都需要展示同一套全局公共组件（比如全局消息条、固定版权页脚）时，才适合把这类组件放在根组件。

二、是否需要新建独立布局组件配合子路由配置，才能实现需要的效果？ #

• 是，新建独立布局组件配合子路由是Angular生态中实现多套布局隔离的标准方案，比在根组件里加*ngIf="isLoggedIn"控制导航显隐的写法维护性高很多，也不会出现登录页加载瞬间导航闪一下的问题。

1. 精简根组件模板 #

把app.component.html里原有的nav、p-tabView相关代码全部删除，只保留路由出口，让根组件只承担路由承载的作用：

<router-outlet></router-outlet>

2. 新建带导航的主布局组件 #

生成独立的MainLayoutComponent，把原来写在根组件里的tab导航代码迁移到这个组件的模板中，注意要在组件内部单独放一个<router-outlet>用来渲染子路由对应的业务页面：

<!-- main-layout.component.html -->
<nav>
  <p-tabView (onChange)="onClick($event)">
    <p-tabPanel header="Random" routerLink="/main/random"></p-tabPanel>
    <p-tabPanel header="Manifacture" routerLink="/main/Manifacture"></p-tabPanel>
    <p-tabPanel header="Add" routerLink="/main/add"></p-tabPanel>
    <!-- 子路由出口，渲染挂载在主布局下的业务组件 -->
    <router-outlet></router-outlet>
  </p-tabView>
</nav>

3. 重构路由配置 #

把登录、注册这类不需要展示导航的公共页面放在顶层路由，所有需要展示tab导航的业务页面都作为主布局组件的子路由配置：

// app.routes.ts 路由配置
export const routes: Routes = [
  { path: '', redirectTo: '/login', pathMatch: 'full' },
  // 无公共导航的公共页面
  { path: 'login', component: LoginComponent },
  { path: 'register', component: RegisterComponent },
  // 带tab导航的主布局路由，所有业务页面挂载在children下
  {
    path: 'main',
    component: MainLayoutComponent,
    // 建议配套添加登录路由守卫，未登录访问业务页自动跳登录页
    canActivate: [AuthGuard],
    children: [
      { path: 'random', component: RandomPComponent },
      { path: 'Manufacuter', component: ManufactureComponent },
      { path: 'add', component: AddComponent },
      { path: '', redirectTo: 'random', pathMatch: 'full' }
    ]
  }
];

4. 调整登录成功跳转逻辑 #

登录接口返回200状态码、登录态存储完成后，直接跳转到主布局下的对应业务路径即可：

// login.component.ts 登录成功回调
this.authService.login(loginForm.value).subscribe(res => {
  if (res.status === 200) {
    localStorage.setItem('access_token', res.token);
    // 跳转至主布局下的业务页面
    this.router.navigate(['/main/random']);
  }
})

额外提示：路由守卫AuthGuard可以统一拦截所有主布局下的路由访问，未检测到有效登录态时直接重定向到登录页，不需要在每个业务页面单独写登录判断逻辑。

内容的提问来源于stack exchange，提问作者Sonn