0

I'm using nativescript-urlhandler in my Nativescript Aplication. When I put a router, my application routing in first in Main Component and in second in component that I want.

I want to routing directly to component that I want.

I have this routing.ts code:

const routes: Routes = [
  {
    path: 'home',
    component: HomeComponent,
    canActivate: [AuthGuard],
    children: [
      {
        path: 'fp', component: FirstPageComponent
      },
      {
        path: 'profile', component: ProfileComponent
      }
    ]
  },
  {
    path: 'outsidelogin',
    component: outsideloginComponent,
    children: [
      { path: 'login', component: LoginFirstComponent },
      { path: 'register', component: RegisterComponent },
      { path: 'resetPasswordRequest/:id', component: ResetPassIdComponent }
    ]
  },

    { path: '', redirectTo: '/home/fp', pathMatch: 'full' }
];

AuthGuard

 canActivate(): boolean {
        if (this.auth.isAuthenticated()) {
            return true;
        }
        this.router.navigate(['/outsidelogin/login']);
        return false;
    }

In this code is a problem.

ngOnInit() {
        if (this.auth.isAuthenticated()) {
            return true;
        }
        handleOpenURL((appURL: AppURL) => {
            console.log('Got the following appURL', appURL);
            this.myappurl = appURL
            let url_1 = this.myappurl.toString();
            let url_id = url_1.split("/").reverse()[0];
            this.resetpasss = url_id
            this.router.navigateByUrl('/outsidelogin/resetPasswordRequest/' + this.resetpasss);
        });
    }
web site
  • 99
  • 8

1 Answers1

1

Use Router Guards, implement canActivate for your main component route, if you have a URL to navigate from handleOpenURL then return false and navigate to the new url.

Update: After looking at your code, I think you must keep your ResetPassIdComponent lightweight. Seems it's nested under multiple page router outlets, try to keep that component / copy of the component at root level for better & faster initialisation.

Replace the code below in your auth.guard.ts and remove the url handling code from app component.

import { Injectable } from '@angular/core';
import { Router, CanActivate } from '@angular/router';
import { LoginService } from '~/services/login';
import { handleOpenURL, AppURL } from 'nativescript-urlhandler';

@Injectable()
export class AuthGuard implements CanActivate {

    constructor(private router: Router, private auth: LoginService) { }

    canActivate(): boolean {
        if (this.auth.isAuthenticated()) {
            return true;
        }

        const timeOut = setTimeout(() => {
            handleOpenURL(null);
            this.router.navigate(['/test/login']);
        }, 100);
        handleOpenURL((appURL: AppURL) => {
            if (timeOut) {
                clearTimeout(timeOut);
                console.log('Got the following appURL', appURL);
                let url_1 = appURL.toString();
                let url_id = url_1.split("/").reverse()[0];
                console.log(url_id);
                this.router.navigateByUrl('/test/questions/' + url_id);
            }
        });
        return false;
    }

}
Manoj
  • 21,753
  • 3
  • 20
  • 41
  • Yes I have a AuthGuard for Main Component. I try to use AuthGuard in `path: 'outsidelogin', .... ` but my app doesn't navigate. Can you implement an example please? – web site Dec 20 '18 at 11:28
  • If you setup a Playground, I can take a look. – Manoj Dec 20 '18 at 11:37
  • it is difficult for me to do this. You can do an example please? – web site Dec 20 '18 at 14:44
  • The Angular docs in the above link itself has example you may refer to. – Manoj Dec 20 '18 at 15:03
  • You think that I use here `path: 'outsidelogin', component: outsideloginComponent, children: [ { path: 'login', component: LoginFirstComponent }, { path: 'register', component: RegisterComponent }, { path: 'resetPasswordRequest/:id', component: ResetPassIdComponent } ]` an AuthGuard ? – web site Dec 20 '18 at 15:18
  • Can you help please? I need to fix this problem? – web site Dec 20 '18 at 16:16
  • Please Manoj, can you see my post? https://stackoverflow.com/questions/53921510/how-to-execute-in-first-a-function-and-in-second-canactivate?noredirect=1#comment94686012_53921510 – web site Dec 25 '18 at 14:55
  • As I already mentioned, please setup a Playground or share a Github repo where the issue can be seen. – Manoj Dec 25 '18 at 17:34
  • Can you see my demo please https://github.com/binaau/auth_guard After installed, please click this link https://stackoverflow.com/questions/53921510 and open with app. In this moment you can see that application in first navigate in login component and in second in reset pass. I want to navigate directly in reset pass only when I click link. Thank you! – web site Dec 27 '18 at 09:21
  • can you ask me any idea, how to issue my problem? Thank you! – web site Dec 27 '18 at 10:28
  • Please Manoj, can you help me? I'm waiting for your response? – web site Dec 27 '18 at 16:37
  • Sure, but You have uploaded just the app directory, files like package.json, webpack config etc., are missing in your repo. Please upload the full & complete project which will help me to save my time from configuring it locally again. – Manoj Dec 27 '18 at 17:03
  • Please look again, are all file that you want? – web site Dec 27 '18 at 17:17
  • Hello Many, please, I'm waiting for your response. Thank you! – web site Dec 28 '18 at 09:09
  • Thank you so much. – web site Dec 28 '18 at 10:18