在 angular material 中用密码保护网页的最简单方法

Question

我有一个关于如何使用密码保护网页的问题。我使用 angular material 创建了一个网页，该网页将与 back-end 服务对话以查询信息。我还添加了一个管理员 sub-page 来进行网站配置。

我想用密码保护管理页面。这种保护可以是一个非常简单的安全功能，不需要任何复杂的东西。只是一个只有少数人知道的令牌，一旦他们输入有效令牌，管理页面就会显示。

我看了几个方法：

.htaccess 和 .htpassword
将 java 脚本作为 header 嵌入 admin.component.html
angular路由器link认证

1 和 2 对我不起作用 3 似乎对我的要求有点矫枉过正。

知道如何制作一个简单的密码保护网页吗？此外，如果我必须使用 3，它将保护任何页面 re-routed 到管理页面。但是如果我直接输入www.mysite.com/admin，它还会被保护吗？

Answer 1

我会使用 auth guards。

尝试查看用户：https://angular-authguard-jwt-duxyen.stackblitz.io/users

你不能，在你登录之前它会受到保护。

我们在用户路由上设置了 authGuard。

const routes: Routes = [
  { path: 'users', component: UsersComponent, canActivate: [AuthGuard] }
];

这就是授权什么是可见的，什么是不可见的。如果用户不能激活，自己折腾到/login.

@Injectable()
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.loggedIn()){
        return true;
      }else{
        this.router.navigate(['/login']);
        return false;
      }
  }
}

授权服务 returns true/false 为 canActivate 请求时。 true/false 取决于用户是否在他们的机器上存储了“secretToken”。

@Injectable()
export class AuthService {

  constructor() { }

  loggedIn(){
    let hasToken = false;
    if (localStorage.getItem('token') == 'secretToken'){
      hasToken = true;
    }
    return hasToken;
  }

  getToken(){
    return localStorage.getItem('token');
  }

}

如果用户通过身份验证可以访问我们的 /users 路由，我们使用将令牌存储到 localStorage 来跟踪。

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
})
export class LoginComponent implements OnInit {
  loginUserData: User = { username: '', password: '' };
  allowedUsername = 'Mike';
  allowedPassword = '123';
  constructor(private _auth: AuthService, private router: Router) {}
  ngOnInit() {}

  loginUser() {
    if (
      this.loginUserData.username == this.allowedUsername &&
      this.loginUserData.password == this.allowedPassword
    ) {
      console.log('login success');
      localStorage.setItem('token', 'secretToken');
      localStorage.setItem('is_admin', 'true');
      this.router.navigate(['/home']);
    }
  }
}

export interface User {
  username: string;
  password: string;
}

使用令牌是非常常见的客户端身份验证。在我们的例子中，令牌是 hard-coded 但如果你想将其扩展到实际的身份验证过程，你可以。为简单起见，我删除了它（提示：google JWT 令牌，如果您感兴趣的话）。

基本上在登录后，我们在客户端localStorage 上放置一个key/value 对。 key 是令牌，value 是“scretToken”。一旦用户第一次成功登录，我们就把它放在那里。然后我们将用户重定向到 /users url。到达 /users 我们的 authGuard 开始，检查客户端是否在他们的机器上有令牌“scretToken”。如果他们有，他们可以看到内容。如果没有，他们被扔回/login。

因为我们将令牌存储在 localStorage 中，即使用户刷新或更改选项卡，他们仍然经过身份验证。如果他们手动清除浏览数据，则令牌将被删除。如果他们使用我们的注销按钮注销，我们也会从 localStorage 中删除令牌。

在这里登录：https://angular-authguard-jwt-duxyen.stackblitz.io/login

用户名：Mike，密码：123

工作示例：https://stackblitz.com/edit/angular-authguard-jwt-duxyen?file=src%2Fapp%2Flogin%2Flogin.component.ts

在 angular material 中用密码保护网页的最简单方法

most simple way to password protect a web page in angular material

angular

angular-material

password-protection