angular2: cách nhận Đường dẫn đầy đủ trên bảo vệ CanLoad trong khi duy trì url chuyển hướng

Question

Tôi đang sử dụng phiên bản 2.4 và phiên bản bộ định tuyến góc "^ 3.4.10".

Tôi đang cố gắng xử lý url chuyển hướng bằng dịch vụ bảo vệ thông tin.

Khi người dùng nhấn url 'miền/nhiệm vụ/3/chi tiết' và nếu người dùng không đăng nhập thì người dùng được chuyển hướng đến trang 'tên miền/đăng nhập'. và khi người dùng đăng nhập thành công vào hệ thống, sau đó được chuyển hướng đến url trước đó của tên miền/nhiệm vụ/3/chi tiết mà người dùng cố gắng truy cập.

Tôi đã triển khai bảo vệ CanLoad trên mô-đun gán. vì vậy khi người dùng cố gắng truy cập vào url 'tên miền/nhiệm vụ/3/chi tiết' và nếu người dùng không đăng nhập, lưu trữ url vào thuộc tính redirectUrl của authservice (this.authService.redirectUrl).

vì vậy, đây là sự cố xảy ra trong trường hợp của tôi. tôi không thể nhận được đường dẫn đầy đủ của url mà người dùng truy cập. tôi đang nhận 'chuyển nhượng' thay thế 'chuyển nhượng/3/chi tiết' trong bảo vệ CanLoad. làm cách nào tôi có thể nhận được đường dẫn đầy đủ để tôi có thể chuyển hướng người dùng đến đường dẫn thích hợp trong bảo vệ CanLoad.

CanLoad:

canLoad(route: Route): boolean { 

      let url = `/${route.path}`; // here i got url path 'assignment' instead 'assignment/3/detail' 

      return this.checkLogin(url); 
     } 

Main định tuyến app.routes.ts

const routes: Routes = [ 
{ path: '', redirectTo: 'login', pathMatch: 'full' }, 
{ path: 'login', component: LoginComponent}, 
{ 
    path: 'assignment', 
    loadChildren: './assignment/assignment.module#AssignmentModule', 
    canLoad: [AuthGuard] 
}, 
{ path: '**', redirectTo: '', pathMatch: 'full' }]; 

Phân tuyến: phân-routing.ts

 const assignmentRoutes: Routes = [ 
     { 
      path: '', 
      component: AssignmentComponent, 
      canActivate: [AuthGuard] 
      children: [ 
       { 
        path: '', 
        canActivateChild: [AuthGuard], 
        children: [ 
         { 
          path: ':assignmentId/detail', component: AssignmentDetailComponent, 
          canActivate: [AuthGuard] 

         } 
         ] 
        }] 
     }]; 

AuthGuard: auth-gurad.service.ts

import { Injectable } from '@angular/core'; 
import { 
    CanActivate, Router, 
    ActivatedRouteSnapshot, 
    RouterStateSnapshot, 
    CanActivateChild, 
    NavigationExtras, 
    CanLoad, Route 
} from '@angular/router'; 
import { AuthService } from './auth.service'; 

@Injectable() 
export class AuthGuard implements CanActivate, CanActivateChild, CanLoad { 
    constructor(private authService: AuthService, private router: Router) { } 

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { 
     let url: string = state.url; 
     return this.checkLogin(url); 
    } 

    canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { 
     return this.canActivate(route, state); 
    } 

    canLoad(route: Route): boolean { 

     let url = `/${route.path}`; // here i got url path 'assignment' instead 'assignment/3/detail' 

     return this.checkLogin(url); 
    } 



    checkLogin(url: string): boolean { 
      if (this.authService.isLoggedIn) { 
       if(this.authService.redirectUrl!=null){ 
        let redirectUrl = this.authService.redirectUrl; 
        this.authService.redirectUrl = null; 
        this.this.router.navigate([redirectUrl]); 
       } 
       return true; 
       } 

     // Store the attempted URL for redirecting 
     this.authService.redirectUrl = url; 

     // Navigate to the login page 
     this.router.navigate(['/login']); 

     return false; 
    } 
} 

Answer 1

Tôi gặp vấn đề tương tự. Những vấn đề này có liên quan

• https://github.com/angular/angular/issues/17359
• https://github.com/angular/angular/issues/12411

Và họ thậm chí có một PR mở về vấn đề này chưa được sáp nhập chưa

• https://github.com/angular/angular/pull/13127

The workarou nd bây giờ có vẻ là để thay thế phương pháp canLoad với canActivate, ở đó bạn có thể có quyền truy cập vào đường dẫn đầy đủ, điều xấu tất nhiên là bạn đang tải mô-đun

Chỉnh sửa: Ngoài ra cho bạn Định tuyến chuyển nhượng, không cần phải gọi số canActivate cho mỗi tuyến đường dành cho trẻ em. Có nó được xác định trên tuyến đường mẹ nên áp dụng bảo vệ cho tất cả các tuyến đường trẻ em.

Answer 2

Có một tạm workaround thay vì thay thế canLoad với canActivate:

Bạn có thể lưu trữ các url qua redirectUrl = location.pathname và chuyển hướng sau qua this.router.navigateByUrl(redirectUrl);.Tất nhiên, nếu bạn làm việc trên một đường phụ (như domain), bạn phải điều chỉnh pathname một chút.