使用密码保护 angular 应用程序

Question

I would like to protect my application with a password. When a user opens the app he has to type in the correct password then he is redirected to the main page of the application.

I tried creating a component with simple password input that if validated successfully would redirect using routing, but that doesn't work since the user can still just type in the correct url ( /invitation ) and bypass the password validation.

  validatePassword(input: string): void {
    if (this.password === input) {
      this.router.navigate(['/invitation']);
    }
  }

What is the correct way to go around this problem?

Answer 1

Short answer, you can't.

Anything security related on a frontend is not secure. You can use a guard to hide the page, but with a little knowledge, this can be bypassed. You should instead protect your data (API). How to depends on your stack.

Answer 2

Angular - Preventing unauthorized access

Answer 3

Wouldn't the easy way just to be to add a password page and save something in html storage, then check on every page load? I suppose the APIs can still be called, but it would prevent from viewing