angular5 - 角度 5/6 : protect route (route guard) without redirecting to error route

Question

我有一点咸菜。我正在使用路由保护(实现 CanActivate 接口(interface))来检查用户是否被授予访问特定路由的权限:

const routes: Routes = [
    {
        path: '',
        component: DashboardViewComponent
    },
    {
        path: 'login',
        component: LoginViewComponent
    },
    {
        path: 'protected/foo',
        component: FooViewComponent,
        data: {allowAccessTo: ['Administrator']},
        canActivate: [RouteGuard]
    },
    {
        path: '**',
        component: ErrorNotFoundViewComponent
    }
];

现在它在保护“/protected/foo”路由不被激活方面效果很好，但我想告诉用户他试图访问的路由被禁止(类似于您可能从服务器获得的 403 Forbidden)。

问题:如何向用户显示这个特殊的错误 View ，而不将他重定向到错误路线，这似乎是我发现的许多来源的首选选项？我如何仍然使用我的 RouteGuard 而无需实际加载禁止的路线，因为如果我检查 FooViewComponent 内部的访问并显示不同的 View 击败了首先拥有 RouteGuard 的点。

理想情况下，我希望我的 RouteGuard 不仅在 canActivate() 方法中返回 false，而且还用 ErrorForbiddenViewComponent 完全替换组件。但我不知道该怎么做，或者这是否可能。还有其他选择吗？

这就是我的路线守卫现在的样子:

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

@Injectable()
export class RouteGuard implements CanActivate {

    constructor(
        private router: Router,
        private auth: AuthService
    ) {}

    canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        const { auth, router } = this;
        const { allowAccessTo } = next.data;
        const identity = auth.getIdentity();
        if (
            identity &&
            allowAccessTo.indexOf(identity.role)
        ) {
            // all good, proceed with activating route
            return true;
        }
        if (identity) {
            // TODO show ErrorForbiddenViewComponent instead of redirecting
            console.log('403 Forbidden >>', next);
        }
        else { 
            // not logged in: redirect to login page with the return url
            const [returnUrl, returnQueryParams] = state.url.split('?');
            console.log('401 Unauthorised >>', returnUrl, returnQueryParams, next);
            router.navigate(['/login'], {queryParams: {returnUrl, returnQueryParams}});
        }
        return false;
    }
}

所以我只是阻止路由加载，但我没有重定向。我仅将未登录的访问者重定向到登录路线。

推理:

• 路线应反射(reflect)特定的应用状态 - 访问路线url 应重新创建该状态
• 拥有错误路由(404 Not Found 除外)意味着您的应用程序实际上可以重新创建错误状态。这没有意义为什么您要将错误状态保留为应用程序的状态？为了调试目的应该使用日志(控制台或服务器)，重新访问错误页面(即页面刷新)可能会干扰这一点。
• 此外，通过重定向到错误路线，应用程序应该向用户提供一些错误见解。就此而言，某些参数需要通过 url 传递或(更糟糕)将错误状态保留在某些错误中服务并在访问错误路由时检索它。
• 此外，忽略 RouteGuard 并仅加载组件并检查其内部的访问可能会导致一些额外的依赖项无论如何都不会使用的已加载(因为不允许用户)，使得整个延迟加载更加困难。

有人对此有某种解决方案吗？我还想知道，为什么 Angular 2+ 出现这么久之后，以前没有人遇到过这种情况？大家都同意重定向吗？

另请记住，虽然我当前正在同步使用 FooViewComponent，但将来可能会发生变化!

Answer 1

我曾经解决过类似的问题。

分享我的stackblitz poc我创建的地方 -

• 经过身份验证的组件(带防护)
• 登录组件
• 权限守卫
• 路由(/auth 路由由 PermissionGuardService 防护提供)

guard 正在评估用户类型并相应地处理重定向/错误。

用例是 -

• 用户未登录(显示带有登录消息的 Toast)
• 用户不是管理员(显示带有未经授权的消息的 Toast)
• 用户是管理员(显示成功消息的 toast )

我已将用户存储在本地存储中。

EDIT - DEMO

如果您需要特殊处理，请告诉我，我将更新代码库。

干杯!