【angular6路由卫士如何设置？ _angular model 】

angular6路由卫士如何设置？

我也踩过这个坑( 1 )

已统计您的踩坑,无需重复点击

回答(0)

angular model

详细描述

截图

代码

angular6路由卫士设置方法：

新增卫士服务


// src/app/serve/auth-guard.service.ts
import { Injectable } from '@angular/core';
import { Router, CanActivate } from '@angular/router';

@Injectable()
export class AuthGuardService implements CanActivate {
  constructor(public router: Router) {}
  canActivate(): boolean {
    if (localStorage.getItem('username') === null) {      // 验证登录状态
      this.router.navigate(['/login']);                   // 重定向
      return false;
    }
    return true;
  }
}
导入路由模块


// src/app/app.routing.module.ts
import { Routes, CanActivate } from '@angular/router'; // 导入依赖

import { 
  AuthGuardService as AuthGuard 
} from '../app/serve/auth-guard.service';             // 导入服务
const routes: Routes = [
  { path: '', redirectTo: '/login', pathMatch: 'full' },
  { path: 'login', component: AdminLoginComponent },
  {
    path: 'global',
    component: GlobalComponent,
    children: childRoutes,
    canActivate: [AuthGuard]          // 添加验证服务
  }
];
@NgModule({
...
  providers: [ AuthGuard ],        // 添加提供者
})

登录时：


... 
 if (this.data.code === 0) {                //  用户名密码验证成功
      localStorage.setItem('username', 'admin');  
      this.router.navigate([`../global`]);          
        }
...
退出时：


logout() {
    localStorage.removeItem('username');
    this.router.navigate(['/login']);
  }

编辑于2024-11-22