Angular2 routing authGuard service

Posted By : Avilash Choudhary | 30-Jun-2017

Hi Guys.

When you starting developing a application then you need to restrict some users to access some of the resources. Guest users have only access to particular resources and login user can have access to multiple modules. To achieve this we have implement the authguard service for routing. This authguard service will check the all access parameters and if user have access to that particular resource then it will return true otherwise false. In authguard serive,

suppose you have routing.ts file like this

 const appRoutes: Routes = [
    {
        path: '',
        redirectTo: 'login',
        pathMatch: 'full'
    },
    {
        path: 'login',
        component: LoginComponent
    },
    {
        path: 'adminWeb',
        component: SidebarComponent,
        children: [
            {
                path: '',
                redirectTo: 'addEnterprise',
                pathMatch: 'full'
            },
            {
                path: 'manageMsisdn',
                component: ManageMsisdnComponent,
                canActivate: [AuthGaurdService],
                data: { "type": "whitelist" }
            },
                       {
                path: 'configureCloud',
                component: ConfigureCloudComponent,
                canActivate: [AuthGaurdService],
                data: { "type": "cloud" }
            },
            {
                path: 'cloudManage',
                component: CloudManageComponent,
                canActivate: [AuthGaurdService],
                data: { "type": "cloud" }
            },
            {
                path: 'slaManage',
                component: SlaManageComponent,
                canActivate: [AuthGaurdService],
                data: { "type": "sla" }
            },
          ]
    }
];
export const routing = RouterModule.forRoot(appRoutes);

 

In your routing file, you have provide the Authguard Service to canActivate property, So whenever that route is checked, first of all it will look to authguard service, if he gets true then only redirect to that route, otherwise nothing will happen.

your service file will look like this:

 @Injectable()
export class AuthGaurdService implements CanActivate, Resolve {

    constructor(private baseUtils: BaseUtils, private router: Router) {

    }

    canActivate(route: ActivatedRouteSnapshot): boolean {
        let data: any = route.data;
       
            if (data && data.type) {
                if (data.type == "whitelist") {
                    return true;
                }  else {
                    this.router.navigate(["adminWeb/addEnterprise"]); // if user don't have access to whitelist module then redirect to other page
                    return false;
                }
            } else {
                return true;
            }
    }
}

About Author

Author Image
Avilash Choudhary

Avilash has excellent experience in developing mobile and web applications using jQuery , Javascript and PhoneGap. His hobbies are watching and playing cricket.

Request for Proposal

Name is required

Comment is required

Sending message..