Angular 2 – 重定向登录页面

发布时间：2020-12-17 17:01:58 所属栏目：安全来源：网络整理

导读：首先调用模板登录(login.component).登录后加载app.component. 我的问题是,这可能吗？我该怎么办？ Pergunta Editada：我已经使用Can Activate了.对不起,我还在学习英语.我想要以下…… bootstrap首先调用app.componet. @Component({ selector: 'my-app',te

首先调用模板登录(login.component).登录后加载app.component.

我的问题是,这可能吗？我该怎么办？

Pergunta Editada：

我已经使用Can Activate了.对不起,我还在学习英语.我想要以下……

bootstrap首先调用app.componet.

@Component({
    selector: 'my-app',template: `  
    		<ul class="sidebar-menu">
		        <li class="header">Painel</li>
		        <li class="treeview">
		          <a href="#"><i class="fa fa-link"></i> <span>Loja</span>
		            <span class="pull-right-container">
		              <i class="fa fa-angle-left pull-right"></i>
		            </span>
		          </a>
		          <ul class="treeview-menu">
		            <li><a routerLink="/dashboard">Dashboard</a></li>
		          </ul>
		        </li>
		        <li><a routerLink="/users"><i class="fa fa-book"></i> <span>User</span></a></li>
		    </ul>
		    <div class="content-wrapper">
		        <router-outlet></router-outlet>
		    </div>`,})

export class AppComponent implements OnInit{}

我想在调用app.component之前调用login.component.只有在调用用户登录后调用app.component.

如果login.component是路线,则将加载菜单,因为菜单将被加载到< router-outlet>< / router-outlet>中.

解决方法

是;它是可能的 – 它在 advanced Routing & Navigation文档中有详细描述,特别是在 Milestone #4: Route Guards部分.

您需要定义一个CanActivate防护,然后使用防护保护路线：

AUTH-guard.service.ts

import { Injectable }     from '@angular/core';
import { CanActivate }    from '@angular/router';

@Injectable()
export class AuthGuard implements CanActivate {
  canActivate() {
    console.log('AuthGuard#canActivate called');
    return true;
  }
}

然后使用防护来保护您需要身份验证的网站部分：

admin.routing.ts

import { AuthGuard }      from '../auth-guard.service';

const adminRoutes: Routes = [
  {
    path: 'admin',component: AdminComponent,canActivate: [AuthGuard],children: [
      {
        path: '',children: [
          { path: 'crises',component: ManageCrisesComponent },{ path: 'heroes',component: ManageHeroesComponent },{ path: '',component: AdminDashboardComponent }
        ],}
    ]
  }
];

export const adminRouting: ModuleWithProviders =
    RouterModule.forChild(adminRoutes);

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!