How to disable canActivate guard

Question

After hours of searchig of where is CanActivate interface is implemented in the web app didn't find nothing. So I want to ask you is there a way to generally disable it? Cant access my url and didn't find any other redirect. It sends me to the login page every time. I am not familiar with angular so please excuse me. If you need some code example just tell me. I am not sure what I have to provide.

EDIT The routing file ( I guess ):

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { DataService } from './data.service';
import { PublicuserService } from './Services/publicuser.service';
import { WardmemberService } from './Services/wardmember.service';
/*import {FileUploadModule} from 'primeng/primeng';*/
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
//import { NgBootstrapFormValidationModule } from 'ng-bootstrap-form-validation';
import { AppComponent } from './app.component';
import { MyLoginComponent } from './my-login/my-login.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { TimelineComponent } from './timeline/timeline.component';
import { LandingPageComponent } from './landing-page/landing-page.component';
import { UserInfoComponent } from './user-info/user-info.component';
import { SubTimelineComponent } from './sub-timeline/sub-timeline.component';
import { EventComponent } from './event/event.component';
import { FriendComponent } from './friend/friend.component';
import { MemberLoginComponent } from './member-login/member-login.component';
import { JobDisplayComponent } from './job-display/job-display.component';
import { AddAdsComponent } from './add-ads/add-ads.component';
import { SearchResultComponent } from './search-result/search-result.component';
/*Social login module*/
import { SocialLoginModule, AuthServiceConfig } from "angular4-social-login";
import { FacebookLoginProvider } from "angular4-social-login";
import { NormalHeaderComponent } from './normal-header/normal-header.component';
import { Ng2FileTypeModule } from 'ng2-file-type';
import { Ng2FileSizeModule } from 'ng2-file-size';
import { PublicUserHeaderComponent } from './public-user-header/public-user-header.component';
import { PublicUserTimelineComponent } from './public-user-timeline/public-user-timeline.component';
import { PublicUserSubTimelineComponent } from './public-user-sub-timeline/public-user-sub-timeline.component';
import { AccceptPublicUserDetailsModalComponent } from './acccept-public-user-details-modal/acccept-public-user-details-modal.component';
import { PublicUserFollowingComponent } from './public-user-following/public-user-following.component';
import { WardMemberPublicProfileComponent } from './ward-member-public-profile/ward-member-public-profile.component';
import { WardMemberPublicProfileTimelineComponent } from './ward-member-public-profile-timeline/ward-member-public-profile-timeline.component';
import { WardMemberPublicProfileAboutComponent } from './ward-member-public-profile-about/ward-member-public-profile-about.component';
import { WardMemberPublicProfileFAQComponent } from './ward-member-public-profile-faq/ward-member-public-profile-faq.component';
import { WardMemberPublicProfileEventComponent } from './ward-member-public-profile-event/ward-member-public-profile-event.component';
import { WardMemberPublicProfileJobComponent } from './ward-member-public-profile-job/ward-member-public-profile-job.component';
import { SharePostComponent } from './share-post/share-post.component';
import { MomentModule } from 'angular2-moment';
import { PostfromFollowingmemberComponent } from './postfrom-followingmember/postfrom-followingmember.component';
import { ShareButtonsModule } from 'ngx-sharebuttons';
import { ShareModule } from 'ng2share/share.module';
import { SelectModule } from 'angular2-select';
import { MyMunicipalityComponent } from './my-municipality/my-municipality.component';
import { PostDetailComponent } from './post-detail/post-detail.component';
import { NgAutoCompleteModule } from "ng-auto-complete";
import { GroupComponent } from './group/group.component';
import { AddGroupMembersComponent } from './add-group-members/add-group-members.component';
import { PostDetailInfoComponent } from './post-detail-info/post-detail-info.component';
import { GroupListComponent } from './group-list/group-list.component';
import { GroupListMemberComponent } from './group-list-member/group-list-member.component';
import { UserGroupComponent } from './user-group/user-group.component';
import { GroupMembersComponent } from './group-members/group-members.component';
import { GroupMemberAboutComponent } from './group-member-about/group-member-about.component';
import { UniversalPageComponent } from './universal-page/universal-page.component';
import { Ng2CompleterModule } from "ng2-completer";
import { SliderModule } from 'ngx-slider';
import { MostAddClickReportComponent } from './most-add-click-report/most-add-click-report.component';
import { DataTableModule } from "angular2-datatable";
import { ReportComponent } from './report/report.component';
import { WardmemberPostCategoryReportComponent } from './wardmember-post-category-report/wardmember-post-category-report.component';
import { WardmemberFellowMemberGroupComponent } from './wardmember-fellow-member-group/wardmember-fellow-member-group.component';
import { WardmemberCounzlorListComponent } from './wardmember-counzlor-list/wardmember-counzlor-list.component';
import { PublicuserPostCategoryReportComponent } from './publicuser-post-category-report/publicuser-post-category-report.component';
import { PublicuserFellowMemberGroupComponent } from './publicuser-fellow-member-group/publicuser-fellow-member-group.component';
import { PublicuserCounzlorListComponent } from './publicuser-counzlor-list/publicuser-counzlor-list.component';
import { PublicuserReportComponent } from './publicuser-report/publicuser-report.component';
import { TooltipModule } from "ngx-tooltip";
import * as FusionCharts from 'fusioncharts';
import * as Charts from 'fusioncharts/fusioncharts.charts';
import * as FintTheme from 'fusioncharts/themes/fusioncharts.theme.fint';
import { FusionChartsModule } from 'angular4-fusioncharts';
import { Nl2BrPipeModule } from 'nl2br-pipe';
import { LinkyModule } from 'angular-linky';
import { AngularDateTimePickerModule } from 'angular2-datetimepicker';

import { DatePipe } from '@angular/common';
import { FollowersPostComponent } from './followers-post/followers-post.component';
import { PostDetailDisplayComponent } from './post-detail-display/post-detail-display.component';
import { FollowersPostGroupComponent } from './followers-post-group/followers-post-group.component';
FusionChartsModule.fcRoot(FusionCharts, Charts, FintTheme);
import { ImageCompressService, ResizeOptions, ImageUtilityService } from 'ng2-image-compress';
import { AngularMultiSelectModule } from 'angular2-multiselect-dropdown/angular2-multiselect-dropdown';
import { LoginServiceService } from './Services/login-service.service';
import { DataProviderService } from './Services/data-provider.service';
import { NgProgressModule } from 'ngx-progressbar';
import { DxDataGridModule, DxPieChartModule } from 'devextreme-angular';
import { LikeCategorywiseReportComponent } from './like-categorywise-report/like-categorywise-report.component';
import { InfiniteScrollModule } from 'ngx-infinite-scroll';

/*Social facebook login */
let config = new AuthServiceConfig([
  {
    id: FacebookLoginProvider.PROVIDER_ID,
    provider: new FacebookLoginProvider('487205825449125'),
  }
]);
export function provideConfig() {
  return config;
}

@NgModule({
  declarations: [
    AppComponent,
    MyLoginComponent,
    HeaderComponent,
    FooterComponent,
    TimelineComponent,
    LandingPageComponent,
    UserInfoComponent,
    SubTimelineComponent,
    EventComponent,
    FriendComponent,
    MemberLoginComponent,
    JobDisplayComponent,
    AddAdsComponent,
    SearchResultComponent,
    NormalHeaderComponent,
    PublicUserHeaderComponent,
    PublicUserTimelineComponent,
    PublicUserSubTimelineComponent,
    AccceptPublicUserDetailsModalComponent,
    PublicUserFollowingComponent,
    WardMemberPublicProfileTimelineComponent,
    WardMemberPublicProfileComponent,
    WardMemberPublicProfileAboutComponent,
    WardMemberPublicProfileFAQComponent,
    WardMemberPublicProfileEventComponent,
    WardMemberPublicProfileJobComponent,
    SharePostComponent,
    PostfromFollowingmemberComponent,
    MyMunicipalityComponent,
    PostDetailComponent,
    GroupComponent,
    AddGroupMembersComponent,
    PostDetailInfoComponent,
    GroupListComponent,
    GroupListMemberComponent,
    UserGroupComponent,
    GroupMembersComponent,
    GroupMemberAboutComponent,
    UniversalPageComponent,
    MostAddClickReportComponent,
    ReportComponent,
    WardmemberPostCategoryReportComponent,
    WardmemberFellowMemberGroupComponent,
    WardmemberCounzlorListComponent,
    PublicuserPostCategoryReportComponent,
    PublicuserFellowMemberGroupComponent,
    PublicuserCounzlorListComponent,
    PublicuserReportComponent,
    FollowersPostComponent,
    PostDetailDisplayComponent,
    FollowersPostGroupComponent,
    LikeCategorywiseReportComponent,
  ],
  imports: [
    SocialLoginModule,
    BrowserModule,
    HttpModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
    Ng2FileTypeModule,
    Ng2FileSizeModule,
    MomentModule,
    ShareModule,
    Nl2BrPipeModule,
    LinkyModule,
    NgAutoCompleteModule,
    SliderModule,
    DataTableModule,
    TooltipModule,
    Ng2CompleterModule,
    ShareButtonsModule.forRoot(),
    SelectModule,
    AngularDateTimePickerModule,
    FusionChartsModule,
    AngularMultiSelectModule,
    NgProgressModule,
    DxDataGridModule,
    DxPieChartModule,
    InfiniteScrollModule,
    //  NgBootstrapFormValidationModule.forRoot(),
    RouterModule.forRoot([
      {
        path: '',
        component: UniversalPageComponent
      },
      {
        path: 'login',
        component: MemberLoginComponent
      },
      {
        path: 'report',
        component: ReportComponent,
        children: [
          {
            path: '',
            component: WardmemberPostCategoryReportComponent
          },
          {
            path: 'wardmember-fellow-member-group',
            component: WardmemberFellowMemberGroupComponent
          },
          {
            path: 'wardmember-counzlor-list',
            component: WardmemberCounzlorListComponent
          },
          {
            path: 'most-add-click-report',
            component: MostAddClickReportComponent
          },
          {
            path: 'like-categorywise-report',
            component: LikeCategorywiseReportComponent
          },
        ]
      },
      {
        path: 'publicuser-report',
        component: PublicuserReportComponent,
        children: [
          {
            path: '',
            component: PublicuserPostCategoryReportComponent
          },
          {
            path: 'publicuser-fellow-member-group',
            component: PublicuserFellowMemberGroupComponent
          },
          {
            path: 'publicuser-counzlor-list',
            component: PublicuserCounzlorListComponent
          }
        ]
      },
      {
        path: 'user-profile',
        component: TimelineComponent,
        children: [
          {
            path: '',
            component: SubTimelineComponent
          },
          {
            path: 'followers-post',
            component: FollowersPostComponent
          },
          {
            path: 'user-info',
            component: UserInfoComponent
          },
          {
            path: 'event',
            component: EventComponent
          },
          {
            path: 'followers',
            component: FriendComponent
          },
          {
            path: 'job-display',
            component: JobDisplayComponent
          },
          {
            path: 'add-ads',
            component: AddAdsComponent
          }
        ]
      },
      // {
      //   path:'share-post',
      //   component:SharePostComponent
      // },
      {
        path: 'landing-page',
        component: LandingPageComponent
      },
      {
        path: 'my-municipality/:org_name',
        component: MyMunicipalityComponent
      },
      {
        path: 'postfrom-followingmember',
        component: PostfromFollowingmemberComponent
      },
      {
        path: 'post/:ward-name/:post_id',
        component: PostDetailComponent
      },
      {
        path: 'post-detail/:post_id',
        component: PostDetailDisplayComponent
      },
      {
        path: 'login-redirect',
        component: MyLoginComponent
      },
      {
        path: 'public-user-profile',
        component: PublicUserTimelineComponent,
        children: [
          {
            path: '',
            component: PublicUserSubTimelineComponent
          },
          {
            path: 'following',
            component: PublicUserFollowingComponent
          }
        ]
      },
      {
        path: 'search-result/:ward_name',
        component: SearchResultComponent
      },
      {
        path: 'public-user-details',
        component: AccceptPublicUserDetailsModalComponent
      },
      {
        path: 'group/:ward-name/:group-name',
        component: GroupComponent,
      },
      {
        path: 'followersPostGroup/:ward-name/:group-name',
        component: FollowersPostGroupComponent,
      },
      {
        path: 'group-members/:ward-name/:group-name',
        component: GroupMembersComponent,
      },
      {
        path: 'add-members/:group-id',
        component: AddGroupMembersComponent
      },
      {
        path: 'post-detail-info/:post_id',
        component: PostDetailInfoComponent
      },
      {
        path: 'group-list',
        component: GroupListComponent
      },
      {
        path: 'user-group/:ward-name/:group-name',
        component: UserGroupComponent
      },
      {
        path: 'group-member-about/:ward-name/:group-name',
        component: GroupMemberAboutComponent
      },
      {
        path: 'universal-page',
        component: UniversalPageComponent
      },
      {
        path: ':membercode',
        component: WardMemberPublicProfileComponent,
        children: [
          {
            path: '',
            component: WardMemberPublicProfileTimelineComponent
          },
          {
            path: 'public-about',
            component: WardMemberPublicProfileAboutComponent
          },
          {
              path: 'public-services',
              component: WardMemberPublicProfileFAQComponent
          },
          {
            path: 'public-event',
            component: WardMemberPublicProfileEventComponent
          },
          {
            path: 'public-job',
            component: WardMemberPublicProfileJobComponent
          }
        ]
      },
    ])
  ],
  providers: [
    {
      provide: AuthServiceConfig,
      useFactory: provideConfig,

    },
    DataService,
    WardmemberService,
    PublicuserService,
    DatePipe,
    ImageCompressService,
    ResizeOptions,
    LoginServiceService,
    DataProviderService,
  ],
  bootstrap: [AppComponent]
})

export class AppModule { }

Done. Or I think so. This is the only file that I am finding some path and routing. Hope its the right one. — Toma Tomov, Sep 10 '19 at 16:50

Shohel · Answer 1 · 2019-09-10T16:48:43.283

1

Try to return false

canActivate(): boolean {
   return false;
}

The following link is the implementation of canActivate https://medium.com/@ryanchenkie_40935/angular-authentication-using-route-guards-bf7a4ca13ae3

edited Sep 10 '19 at 16:48

answered Sep 10 '19 at 16:46

Shohel

3,886
4
38
75

Sure but where ? This is what I can't understand :) In which file – Toma Tomov Sep 10 '19 at 16:47

score 1 · Accepted Answer · answered Sep 10 '19 at 16:54

After hours of searchig of where is CanActivate interface is implemented in the web app didn't find nothing.

There isn't one....

You're using a third-party library that handles logins. It is forcing the user to sign in.

https://github.com/abacritt/angularx-social-login

score 1 · Answer 3 · answered Sep 10 '19 at 17:05

A guard is nothing but a service (basically a class) where you can implement the CanActivate interface which returns simply true or false.

Here is the actual definition from angular.io

Interface that a class can implement to be a guard deciding if a route can be activated. If all guards return true, navigation will continue. If any guard returns false, navigation will be cancelled. If any guard returns a UrlTree, current navigation will be cancelled and a new navigation will be kicked off to the UrlTree returned from the guard.

Here is a sample Authentication Guard that I have written:

@Injectable({
      providedIn: 'root'
    })
    export class AuthGuard implements CanActivate {
      authenticated: boolean = false;

      constructor(private authService: AuthService, private router: Router) {}

      canActivate(
        next: ActivatedRouteSnapshot,
        state: RouterStateSnapshot
      ): Observable<boolean> | Promise<boolean> | boolean {
        console.log('auth guard called', 'you are trying to visit', state.url);
        this.authService.isAuthenticated.subscribe((authenticated: boolean) => {
// this is where your logic should be written
          this.authenticated = authenticated;
          console.log('auth guard is authenticated', this.authenticated);
        });
        if (this.authenticated) {
          return true;
        } else {
          // TODO save the redirect url to redirect user back to the desired url 
after authentication
          console.log('going to login page');
          this.router.navigate(['/auth/login']);
          return false;
        }
      }
    }

As you can see the CanActivate returns true if the isAuthenticated value is true and false otherwise.

If it is a big app and you are not able to find the guard service, go to your routing module file, see the guard that has been linked to that particular module.

For example in your router module file you will find something like this in your Routes array:

 {
    path: 'dashboard',
    loadChildren: () => import('./feature/dashboard/dashboard.module').then(m => m.DashboardModule),
    canActivate: [AuthGuard]
  },

Here the Auth Guard controls the view of the dashboard module. Likewise in your app, there will be a similar Guard service. You need to search for that service and check the logic in the CanActivate method.

Hope it helps!

So I guess @reactgular is right and I don't have `CanActivate` implemented. Will check the `social-login` as well .. This is my first time facing with angular project and it is a little pain for me :) — Toma Tomov, Sep 10 '19 at 17:08
Yes I agree @reactgular is correct. Check the library docs. The library shared by him is quite cool. — Arindam Dawn, Sep 10 '19 at 17:12

score 0 · Answer 4 · answered Feb 25 '21 at 03:34

You can use the aop-routing library for this. It provides the capability to temporary remove a canactivate guard on a route for a navigation, then reverts the change back when the navigation is complete

https://js.plainenglish.io/dynamically-add-and-remove-canactivate-route-guards-in-angular-e7820ab4e061

How to disable canActivate guard

4 Answers4