最简单的密码保护方法
我有一个关于如何密码保护网页的问题。我使用角材料创建一个网页，将与后端服务，以查询信息。我还添加了一个管理子页面来做网站配置。
我想让管理页面受到密码的保护。这种保护可以是一个非常简单的安全功能，不需要复杂的。一个只有少数人知道的令牌，一旦他们输入了有效的令牌，管理页面就会显示出来。
我看了几种方式：
- .htaccess和.htpassword
- 在admin.component.html中将java脚本作为头嵌入
- 角路由器链路认证
1和2不为我工作3似乎对我的要求来说是过分的。
知道如何制作一个简单的密码保护网页吗？此外，如果我必须与3，它将保护任何页面重新路由到管理页面。然而，如果我直接进入www.mysite.com/admin，它还会受到保护吗？
回答 1
Stack Overflow用户
发布于 2022-02-04 16:52:45
我会用护卫。
试着查看用户：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;
}
}
}当请求时，Auth服务返回true/false for 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');
}
}如果用户经过身份验证以访问我们的localStorage路由，我们将使用存储到/users的令牌来跟踪。
@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;
}使用令牌是非常常见的客户端身份验证。在我们的示例中，令牌是硬编码的，但是如果您想将其扩展到实际的身份验证过程，则可以。为了简单起见，我删除了它(提示:如果您感兴趣，请使用google令牌)。
基本上，在登录后，我们在客户端localStorage上放置了一个键/值对。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
https://stackoverflow.com/questions/70989371
复制相似问题
腾讯云开发者
