Angular 4中如何在登录前隐藏导航栏，默认显示登录页？

嘿，我来帮你一步步实现这个需求，针对Angular 4的场景，操作逻辑很清晰：

1. 配置路由，把登录页设为默认页面 #

首先打开app-routing.module.ts，调整路由规则：

• 将登录组件设为空路径的默认路由，确保完全匹配空路径
• 给需要登录才能访问的页面添加路由守卫，防止未登录用户直接跳转

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { AuthGuard } from './auth/auth.guard'; // 后续创建这个守卫

const routes: Routes = [
  { path: '', component: LoginComponent, pathMatch: 'full' }, // 默认打开登录页
  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] }, // 需要登录的页面
  // 其他业务路由...
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

2. 封装登录状态管理服务和路由守卫 #

先创建auth.service.ts来统一管理登录状态：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  // 获取当前登录状态，从本地存储读取token判断
  get isLoggedIn(): boolean {
    return !!localStorage.getItem('authToken');
  }

  // 登录成功后保存token
  login(token: string): void {
    localStorage.setItem('authToken', token);
  }

  // 登出时清除token
  logout(): void {
    localStorage.removeItem('authToken');
  }
}

再创建路由守卫auth.guard.ts，拦截未登录用户访问受保护页面：

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(): boolean {
    if (this.authService.isLoggedIn) {
      return true; // 已登录允许访问
    } else {
      this.router.navigate(['/']); // 未登录跳回登录页
      return false;
    }
  }
}

3. 修改App组件，绑定登录状态和布局 #

在app.component.ts中注入服务，监听路由变化来更新状态：

import { Component, OnInit } from '@angular/core';
import { AuthService } from './auth/auth.service';
import { Router, NavigationEnd } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  layout: string = 'empty-view-1'; // 默认用空布局适配登录页
  isLoggedIn: boolean = false;

  constructor(private authService: AuthService, private router: Router) {}

  ngOnInit(): void {
    // 初始化登录状态
    this.isLoggedIn = this.authService.isLoggedIn;

    // 监听路由切换，实时更新登录状态和布局
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        this.isLoggedIn = this.authService.isLoggedIn;
        // 登录页用空布局，其他页面用带导航的布局
        this.layout = event.url === '/' ? 'empty-view-1' : 'default-layout';
      }
    });
  }
}

4. 修改app.component.html，控制导航栏显示 #

结合你的现有代码，给导航栏元素添加*ngIf="isLoggedIn"，未登录时自动隐藏：

<!---App.component.html-->
<div class="bg-dark" *ngIf="layout == 'empty-view-1'"></div>

<!-- 导航栏：只有登录后才显示 -->
<app-navbar *ngIf="isLoggedIn"></app-navbar>

<sample-modals *ngIf="controller == 'notifications' && view == 'modals' "></sample-modals>
<right-sidebar...>

<!-- 路由出口：渲染当前页面内容 -->
<router-outlet></router-outlet>

5. 登录组件中更新状态 #

在login.component.ts的登录成功回调里，调用服务更新状态并跳转：

import { Component } from '@angular/core';
import { AuthService } from '../auth/auth.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent {
  constructor(private authService: AuthService, private router: Router) {}

  onLoginSuccess(token: string): void {
    this.authService.login(token);
    this.router.navigate(['/dashboard']); // 登录后跳转到主页
  }
}

这样设置后，用户打开网站会直接进入登录页，登录前导航栏完全隐藏，登录后自动显示导航并可访问受保护的页面。

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