How to access protected routes / disable Auth Guard by knowing auth status

Question

scenario : Here i am building an application in which currently i have a page called products-info where a url is sent to the customer and on clicking on the link he can directly open that particular product page and see the info and the same page will be there in application.

issue : Here i am protecting the routes using Auth guards so without logging, a user cannot access the page .If i sent the same page url to user via email he should be able to view only the page.

So my application has:

login page
products page
products-info page

Normally if a user logs in, this page will be visible but when an admin sends a url as mobiledot.com/products-info to user's email, user clicks on that and application don't want to login and it doesn't want to show any logout or other pages info only on that specific page. below is my code :

router.module.ts

const routes: Routes = [
  { path: '', component: LoginComponent },
  { path: 'main/:role', component: MainComponent, canActivate: [RouteGuard] },
  { path: 'admin', component: AdminComponent},
  { path: 'user', component: userComponent,canActivate: [RouteGuard]}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [RouteGuard]
})
export class AppRoutingModule { }

auth guard

@Injectable()
export class RouteGuard implements CanActivate {

    constructor(private service: accessService, private router: Router) {}

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | Observable<boolean> | Promise<boolean> {
        const isAllowed = this.service.getAuthenticated();
        if (!isAllowed) {
            this.router.navigate(['/']);
        }
        return isAllowed;
    }

}

So i also thought about some thing like if user logs into application. My router module is:

if(user loginin){     
      { path: 'main/:role', component: MainComponent, canActivate: [RouteGuard] },    
    }
     else {
          { path: 'main/:token', component: MainComponent }, 
          ex:  www.mobiledot.com/product-info?toke="ssdsdsdsdSDSD"
}

Is it possible or do we have any other way?

In short, if admin sent the same page url in application which is protected by auth guards to the user via email then user will click on the link and open the page and it should not ask for login.

There is another problem which is about stored token in localstorage. so before moving, do we have to clear that token and place a new one so that it will not redirect to main page?

I think you should be able to check `history` for navigations. If it's the first entity in there this means that this was first navigation. — Sergey, Jun 24 '20 at 15:08

score 3 · Accepted Answer · answered Jun 26 '20 at 20:28

You mean that products-info should be visible for registered users, as they can receive the corresponding link inside their email while they may be unauthorized (perhaps by token expiration) so you need a solution to cover it.

First of all, this is a bad practice to reveal sth like token as Url parameter. So avoid it.

Second, Please try to employ right solution instead of changing basic behaviors in your App. AuthGuard designed to decide if a route can be activated or not. It uses browser storage and in case of token expiration, You can only refresh it before expiration, otherwise user has to login again.

My solution is creating sth like a ticket id which can be appended to the sent link (like mobiledot.com/products-info/928f5f8b663571b7f3d829921c9079939c2d0319). You can make it one-time valid or more for users. store it in database and validate it when a user uses. In this way, there's no need to employ AuthGuard just control content permission on server-side.

score 0 · Answer 2 · answered Jun 20 '20 at 18:42

As you have a route guard , you need a case where it's should return true even you are not logged in.

So, simply you can use the approach you have think of www.mobiledot.com/product-info?toke="ssdsdsdsdSDSD".

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | Observable<boolean> | Promise<boolean> {
// check if there is a query param , like token in the url  and url is your without token one. 
           if(queryParamToken && urlpath === 'view'){
// as you have token hit the api to check if required to check token is a valid one.
or can simply return true as per your need / requirement


 -- checkout this link if you need referece
         } else {

            const isAllowed = this.service.getAuthenticated();
            if (!isAllowed) {
                this.router.navigate(['/']);
            }
            return isAllowed;
  }
        }

Verify token with API in Angular8 canActivate method of AuthGuard -- checkout this link if you need reference

How to access protected routes / disable Auth Guard by knowing auth status

2 Answers2