Question

我有一个应用，其中的路线如下：

const routes: Routes = [
    {
        path: '',
        component: MainComponent,
        canActivate: [AuthGuard],
        children: [
            { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
            { path: 'dashboard', component: DashboardComponent },
            { path: 'profile', component: ProfileComponent },
            {
                path: 'patients',
                loadChildren: 'app/patients/patients.module#PatientsModule'
            },
            { path: 'calendar', component: CalendarComponent },
            { path: 'messages', component: MessagesComponent }
        ]
    },
    { path: 'login', component: LoginComponent },
    { path: '**', component: NotFoundComponent }
];

有一个登录页面，首先登陆用户，然后是保护仪表板页面的authGuard。 authGuard注意除非用户登录，否则不会将其导航到仪表板页面。

authGuard看起来像这样：

@Injectable()
export class AuthGuard implements CanActivate {

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

    canActivate(route, state: RouterStateSnapshot) {
        // if the user has logged in return true
        if (this.authService.isLoggedIn()) return true;

        // otherwise redirect user to login page and return false
       this.router.navigate(['/login'], { queryParams: { returnUrl: state.url }});

        console.log(state.url); // returns '/dashboard'
        return false;
    }
}

在已知以returnUrl =“ desiredRoute”形式直接导航到所需页面的情况下，我给用户提供了键入所需路线的可能性

如果用户删除了路线，则登录到仪表板后，我就有可能被导航回仪表板，因此总是选择侧边栏中的一个项目。

意外的行为可能是由此引起的。

当我启动服务器并打开浏览器时，应用程序将以http://localhost:4200/login?returnUrl=%2Fdashboard路径启动，而我想以http://localhost:4200/login开头。

有没有一种方法可以配置我的路由，使应用程序以http://localhost:4200/login开头并保持我上面描述的行为？

编辑：我的问题与此demo完全相同，差别很小。区别在于，在该示例中，页面被重定向到”，因此登录页面为login?returnUrl=%2F。我不知道，但这是否是预期的行为？

Answer 1

默认情况下，如果要登录Page。这是更新的路由器配置

const routes: Routes = [
    {
        path: '',
        component: MainComponent,
        canActivate: [AuthGuard],
        children: [
            { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
            { path: 'dashboard', component: DashboardComponent },
            { path: 'profile', component: ProfileComponent },
            {
                path: 'patients',
                loadChildren: 'app/patients/patients.module#PatientsModule'
            },
            { path: 'calendar', component: CalendarComponent },
            { path: 'messages', component: MessagesComponent }
        ]
    },
    { path: '', pathMatch: 'full', redirectTo: '/login' },
    { path: 'login', component: LoginComponent },
    { path: '**', component: NotFoundComponent }

authGuard看起来像这样：

@Injectable()
export class AuthGuard implements CanActivate {

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

    canActivate(route, state: RouterStateSnapshot) {
        // if the user has logged in return true
        if (this.authService.isLoggedIn()) return true;

        // otherwise redirect user to login page and return false
       this.router.navigate(['/login']);

        // console.log(state.url); // returns '/dashboard'
        return false;
    }
}

Answer 2

我最终实现的解决方法是保留除以下一项功能外几乎所有以前的应用行为：

登录后，我删除了到仪表板的重定向，因此，RouterStateSnapshot state.url现在在初始化应用程序时返回“ /”：

app.module.ts：

const routes: Routes = [
    {
        path: '',
        component: MainComponent,
        canActivate: [AuthGuard],
        children: [
            { path: 'dashboard', component: DashboardComponent },
            { path: 'profile', component: ProfileComponent },
            {
                path: 'patients',
                loadChildren: 'app/patients/patients.module#PatientsModule'
            },
            { path: 'calendar', component: CalendarComponent },
            { path: 'messages', component: MessagesComponent }
        ]
    },
    { path: 'login', component: LoginComponent },
    { path: '**', component: NotFoundComponent }
];

然后在Guard中，我执行了以下操作，以便首先重定向到“ / login”：

canActivate(route, state: RouterStateSnapshot) {
        // if the user has logged in return true
        if (this.authService.isLoggedIn()) return true;

        // if state.url === '/' navigate to '/login', 
        // otherwise redirect user to login page and include queryParams
        state.url === '/' ? this.router.navigate(['/login']) :
            this.router.navigate(['/login'], { queryParams: { returnUrl: state.url }});

        return false;
    }

Angular 6-初始化应用时，RouterStateSnapshot state.url返回“ / dashboard”

2 个答案: