要实现Angular的身份验证系统，可以使用Angular的官方身份验证库：Angular JWT（JSON Web Token）。下面是一个基本的解决方案，包含了一个登录页面和一个受保护的页面。

首先，需要安装必要的依赖项。在终端中运行以下命令：

npm install @auth0/angular-jwt

然后，在app.module.ts文件中导入所需的模块和服务：

import { JwtModule } from '@auth0/angular-jwt';

@NgModule({
  imports: [
    // ...其他模块
    JwtModule.forRoot({
      config: {
        tokenGetter: tokenGetter,
        allowedDomains: ['example.com'], // 可信任的域名
        disallowedRoutes: ['example.com/login'], // 不需要token的路由
      },
    }),
  ],
  // ...其他声明
})
export class AppModule { }

export function tokenGetter() {
  return localStorage.getItem('access_token');
}

接下来，在登录组件的HTML模板中添加登录表单：

  
  
  登录

在登录组件的Typescript文件中，添加登录方法：

import { JwtHelperService } from '@auth0/angular-jwt';

export class LoginComponent {
  email: string;
  password: string;

  constructor(private jwtHelper: JwtHelperService) {}

  login() {
    // 调用身份验证服务进行登录验证
    // 成功后，将token保存到localStorage中
  }
}

在受保护的组件中，可以使用JwtHelperService来检查用户是否已经登录，并在需要时进行重定向：

import { JwtHelperService } from '@auth0/angular-jwt';

export class ProtectedComponent {
  constructor(private jwtHelper: JwtHelperService) {}

  ngOnInit() {
    const token = localStorage.getItem('access_token');
    if (token && !this.jwtHelper.isTokenExpired(token)) {
      // 用户已登录
    } else {
      // 重定向到登录页
    }
  }
}

这样，当用户访问受保护的页面时，系统会检查其是否已登录。如果已登录，页面将正常显示；如果未登录，则会重定向到登录页。

当用户在登录页成功登录后，可以将服务器返回的JWT token保存到localStorage中。在每个HTTP请求中，可以使用JwtModule自动将token添加到请求的Authorization头中。

以上是一个基本的示例，你可以根据自己的需求进行修改和扩展。