Angular: Redirect to different pages after login on different conditions

Question

I have a simple login where you enter email and password and if it is available in the DB, the user can log in. But as logged in user must redirect to specific pages.

for example: If the user login type is 'supplier' user must redirect to a specific page while if not the user must redirect to another page.

This is the service method

  login(email, password): any {
    const headers = new HttpHeaders({
      'Content-Type': 'application/json'
    });
    return this.http
      .post(this.uri + '/login', { email, password }, {headers})
      .pipe(catchError(this.errorHandler));

  }

I would like to redirect to the dashboard, if user is not type 'supplier'

     this.router.navigate(['dashboard']);

I would like to redirect to the 'supplier' if the user is a supplier

    this.router.navigate(['supplier']);

The user object from backend is as follows

error: false
result:
email: "[email protected]"
phone_no: "00000008"
type: "supplier"
user_id: 1

For ref, This is the ts file method

loginToSystem(): any {
    const email = this.formData().email;
    const password = this.formData().password;

    this.backendService.login(email, password)
      .subscribe(data => {
        this.loginData = data;
        console.log(data);
        // console.log('helo');
        console.log(data.result.type);
      });
    console.log(email, password);
  }

app.routing

const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  {path: 'login', component: LoginComponent},
  {path: 'dashboard', component: DashboardComponent},
  {path: 'supplier', component: SupplierComponent}
];

appreciate any insight on this matter! Thanks!

Mike Hanson · Accepted Answer · 2020-10-17 10:46:34Z

1

Assuming the routes are defined to match the values of the type property returned by your login method you can simply pass the type as the route.

loginToSystem(): any {
const email = this.formData().email;
const password = this.formData().password;

this.backendService.login(email, password)
  .subscribe(data => {
    this.loginData = data;
    console.log(data);
    // console.log('helo');
    console.log(data.result.type);
    this.router.navigate(['/', data.result.type]);
  });
console.log(email, password);

}

edited Oct 17, 2020 at 10:46

answered Oct 17, 2020 at 10:12

Mike Hanson

3062 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Dinuli Thalakumbura Over a year ago

Hey, so even with the change made the page doesn't change

Mike Hanson Over a year ago

Can you provide your route definitions

Mike Hanson Over a year ago

The routes look ok although it is more normal to put the fallback route last. The only other thing I can think of is that you need to include '/' in the call to navigate so this.router.navigate(['/', data.result.type])

Kruger · Accepted Answer · 2020-10-17 11:49:32Z

Should a simple if() not solve your problem?

loginToSystem(): any {
    const email = this.formData().email;
    const password = this.formData().password;

    this.backendService.login(email, password)
      .subscribe(data => {
        this.loginData = data;
        if(data.result.type === 'supplier') {
          this.router.navigate(['supplier']);
        } else {
          this.router.navigate(['dashboard']
        }
      });
    console.log(email, password);
  }

this will be a good solution if you only have 2 level_types

Dinuli Thalakumbura · Accepted Answer · 2020-10-17 12:16:52Z

0

so I ended finding the issue. It was an issue of routing where I had to register the other routes as child components of the main component and then following fixing the routes. A simple if condition fixed the issue!

answered Oct 17, 2020 at 12:16

Dinuli Thalakumbura

1412 silver badges14 bronze badges

Collectives™ on Stack Overflow

Angular: Redirect to different pages after login on different conditions

3 Answers 3

3 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Related