Angular 角度路由：在浏览器中键入url时需要防止导航'；的地址栏无效

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

我试过以下方法-

CanDeactivate-点击地址栏中的enter键时不会触发此操作。 CanActivate-我当前所在的当前URL正在丢失。我所能做的就是测试目标URL。并且可以执行重定向活动。 CanLoad-与CanActivate相同。当前URL正在丢失

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

---

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

如果您想限制对URL的访问，使用警告模式不是一个好办法

有权访问HTML的用户可以很容易地绕过它

---

此外，Angular没有提供内置的方法，因此您必须自己编写代码（可能通过解析器，但这不会阻止页面加载）

在系统防止意外或无效访问的情况下，通过几种方法可以防止访问（INTERCEPTOR、通配符路由、CanActive guard）

01）如果要防止未经授权的访问，可以使用拦截器。从后端开始，您应该提供用户角色（例如：系统管理员）

在未经授权的.interceptor.ts中

@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);
        }))
    }
}

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

02）使用角度路由器通配符-如果在路由中找不到任何url，这有助于将页面重定向到

PageNotFoundComponent

记住通配符路由应该是最后一个路由。

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

03）使用主动防护装置

途中

{
    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;
    }
}

@可注入({
providedIn:'根'
})
导出类AuthGuard实现了CanActivate{
构造函数（私有身份验证：AuthService，私有路由器：router，公共toster:ToastrManager，）{
}
激活(
路由：ActivatedRouteSnapshot，
状态：RouterStateSnashot）：可观察的|承诺|布尔值{
//获取当前用户值
const currentUser=this.auth.currentUserValue；
如果（当前用户）{
//检查路由是否受角色限制
if（route.data.role&&route.data.role.indexOf（currentUser.role）=-1）{
this.toster.errorToastr（“您没有访问权限”、“未授权”{位置：“右下角”，动画：“slideFromBottom”}）；
返回；
}
//因此，请返回true
返回true；
}
//未登录，所以重定向到带有返回url的登录页面
this.router.navigate（['/sign']）；
返回false；
}
}

@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;
    }
}