angular - 当用户在 angular13 中没有任何权限时将用户重定向到主页

Question

我有一个主页和菜单，当搜索 URL 没有用户权限时，我想将用户重定向到主页。 如果有人可以提供帮助，谢谢。

Answer 1

第 1 步:创建身份验证服务 首先，您必须有身份验证服务。因此您需要创建auth.service.ts。

要创建服务，请执行以下操作:

ng g 服务身份验证

第 2 步:创建 Angular 防护

这将创建实现 CanActivate 接口(interface)的auth.guard.ts。

创建命令:

ng g 保护身份验证

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

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

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

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {

      if (!this.authService.isLoggedIn()) {
        this.router.navigate(['/login']); // go to login if not authenticated
        return false;
      }
    return true;
  }
}

第 3 步:在路线内使用守卫 Angular 路由有一个名为 canActivate 的属性，它接受一组守卫，在路由到特定路由之前将检查这些守卫。

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { AuthGuard } from './auth.guard';

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'login', component: LoginComponent },
  { path: 'home', component: HomeComponent,
    canActivate: [AuthGuard], // visit home only if authenticated
  },
];

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