2

I am using auth gaurd to prevent URL manipulation in my angular application and redirecting URL manipulation to login page. But it is causing a problem and that is even after successful login, on refreshing the webpage it considers it as URL manipulation and logs the user out by redirecting to the login page.Please note I am not using JWT or any similar kind of authenication mechanism. It's a vanilla authentication based on password returned by the backend DB.I am aslo not mantaining any session till now. Below I am attaching the snippet where I have mapped the path to the routes :

const appRoutes: Routes = [
  { path: '', component: LoginComponent },
  { path: 'dashboard', canActivate: [AuthGuard], component: DashboardComponent },
  { path: 'file-uploader', canActivate: [AuthGuard], component: FileUploaderComponent },
  { path: 'register', component: RegisterComponent },
  { path: 'login', component: LoginComponent }
 ];


@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private user: UserService, private router: Router) {}
  canActivate() {
    if (this.user.getUserLoggedIn()) {
          return true;
    }
    else
      return false;
  }
}

Please help me resolve this issue.Thanks in advance.

ABHISHEK KUMAR
  • 71
  • 1
  • 10
  • 2
    pleas show your auth gaurd code – Abdelrhman Hussien Mar 04 '18 at 04:37
  • @AbdelrhmanHussien I have added the sinppet. Please help. – ABHISHEK KUMAR Apr 10 '18 at 06:09
  • 1
    You only store a flag in memory to know the user is logged in. When you refresh the page, the application restarts from scratch, and the variables in memory are thus replaced by new ones, with their default initial value. – JB Nizet Apr 10 '18 at 07:05
  • @JBNizet Thank you JB for your response. But I want to prevent my pages routed to login after refreshing. Setting a flag in a component would reset the flag with initial value whenever the component will be loaded on refresh and the looged in user will be logged out. Please correct me if I took wrong inference. Thank you. – ABHISHEK KUMAR Apr 10 '18 at 09:23
  • 1
    You got it. What you should deduce is that there is no way to do what you want without having anything persistent at client-side to indicate that the user is logged in: a cookie, a JTW token in local storage, or something like that. – JB Nizet Apr 10 '18 at 13:52

1 Answers1

0

It might be a little late but I had the same issue and solved it by using sessionStorage. It can store values and preserve them as long as your browser tab is open. When a users accesses your page the first time, no value is set in the sessionStorage, therefor the authGuard returns false and the user gets redirected to the login page. After a successful login you set the userLoggedIn value in the sessionStorage to true like this:

sessionStorage.setItem('userLoggedIn', 'true')

In your AuthGuard you can now get the userLoggedIn value from the sessionStorage. Since the setItem method takes only strings you have to parse it like this:

const isAuthenticated = JSON.parse(sessionStorage.getItem('userLoggedIn')

This converts the string into the correct format of a boolean. Then in your authGuard you can check for isAuthenticated. When the user logs out or should automatically be logged out you just update the sessionStorage value

sessionStorage.setItem('userLoggedIn', 'false')
JB17
  • 366
  • 5
  • 14