how to call return url in angular - cSharp Coder

Latest

cSharp Coder

Sharp Future

Tuesday, September 1, 2020

how to call return url in angular

 Auth Guard that passes original URL to login component


import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

@Injectable()
export class AuthGuard implements CanActivate {

    constructor(private router: Router) { }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        if (localStorage.getItem('currentUser')) {
            // logged in so return true
            return true;
        }

        // not logged in so redirect to login page with the return url and return false
        this.router.navigate(['login'], { queryParams: { returnUrl: state.url }});
        return false;
    }
}


Angular 2 Login Component

The login component is a standard Angular 2 'controller' component that implements the behaviour for a login form.

In the ngOnInit() method the component gets the original url that was passed from the Auth Guard as a route parameter and stores it in the local returnUrl property, if the original url is empty the returnUrl defaults to the home page route ('/'). Parameters for the current route are accessible via the 'private route: ActivatedRoute' property that's injected in the component constructor.

In the login() method the component uses the authenticationService to authenticate the username and password, on successful login the user is redirected to the returnUrl. For more details on the authentication service go to the user registraion and login example link at the top of the post.

Login Component that redirects to the previous / original URL after login

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

import { AlertService, AuthenticationService } from '../_services/index';

@Component({
    moduleId: module.id,
    templateUrl: 'login.component.html'
})

export class LoginComponent implements OnInit {
    model: any = {};
    loading = false;
    returnUrl: string;

    constructor(
        private route: ActivatedRoute,
        private router: Router,
        private authenticationService: AuthenticationService,
        private alertService: AlertService) { }

    ngOnInit() {
        // reset login status
        this.authenticationService.logout();

        // get return url from route parameters or default to '/'
        this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
    }

    login() {
        this.loading = true;
        this.authenticationService.login(this.model.username, this.model.password)
            .subscribe(
                data => {
                    // login successful so redirect to return url
                    this.router.navigateByUrl(this.returnUrl);
                },
                error => {
                    // login failed so display error
                    this.alertService.error(error);
                    this.loading = false;
                });
    }
}

 

No comments:

Post a Comment