Question

要求是检查用户是否手动键入了浏览器URL。如果输入的URL无效或用户无权访问，请停留在同一页面上，并弹出一些警告。

我尝试了以下-

CanDeactivate-单击地址栏中的Enter不会触发此操作。 CanActivate-我当前使用的当前URL丢失了。我所能做的就是测试目标URL。并且可以执行重定向活动。 CanLoad-与CanActivate相同。当前网址丢失了。

Window.onbeforeunload-无法从地址栏访问目标URL。

让我知道此要求是否可以实现以及如何实现。

Answer 1

如果您想限制对URL的访问，那么使用警告模式是不可行的。

有权访问HTML的用户可以轻松绕过它。

此外，Angular没有提供任何内置方法，因此您将不得不编写自己的代码（也许通过解析器，但这不会阻止页面加载）。

Answer 2

constructor(  private router: Router) {
   if ( "some condition") {
      this.router.navigate( ['/Home'] );
   }
}

Answer 3

您可以通过几种方法来阻止访问（例如Inteceptor，通配符路由，CanActive保护），以防止系统意外或无效访问

01） 如果要防止未经授权的访问，可以使用Interceptor。从后端，您应该提供用户角色（例如：SYSTEM_ADMIN）

在未经授权的拦截器中

@Injectable()
export class UnauthorizedInterceptor implements HttpInterceptor {
    constructor() { }

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        return next.handle(request).pipe(catchError(err => {
            if ([401, 403].indexOf(err.status) !== -1) {               
                // YOUR POP UP MESSAGE
            }

            const error = err || err.statusText;
            return throwError(error);
        }))
    }
}

在AppModule.ts中

@NgModule({
    ...,
    [{
      provide: HTTP_INTERCEPTORS,
      useClass: UnauthorizedInterceptor,
      multi: true
    }]
})

02） 使用斜角路由器通配符-如果您未找到任何网址，这有助于将页面重定向到PageNotFoundComponent路由。 记住通配符路径应该是最后一个路径。

{path: '404', component: PageNotFoundComponent},
{path: '**', redirectTo: '/404'}

03） 使用canActive Guard

在途中

{
    path: "customer/view",
    component: CustomerViewComponent,
    data: { role: ["SYSTEM_ADMIN"] }
}

在AuthGuard.ts中

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor (private auth: AuthService, private router: Router, public toster: ToastrManager,) {
}
canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
        //get the current user value
        const currentUser = this.auth.currentUserValue;      
        if (currentUser) {

            // check if route is restricted by role 
            if (route.data.role && route.data.role.indexOf(currentUser.role) === -1) {
                this.toster.errorToastr("Your do not have permission to access", "Not Authorized", { position: "bottom-right", animate: "slideFromBottom" });
                return;
            }

            // authorised so return true
            return true;
    }

     // not logged in so redirect to login page with the return url
     this.router.navigate(['/signin']);
     return false;
    }
}

角度路由：当在浏览器的地址栏中输入的网址无效时，需要阻止导航

3 个答案: