use*_*173 0 angular2-routing angular
我开始学习有关角度2的所有内容,目前有问题.我在我的应用程序中定义了这些路由:
const appRoutes: Routes = [
{path: 'start',
component: StartComponent,
children:[{path: '' },
{
path:'nested', component:NestedTestComponent
}
]},
{path: '', component:LoginFormComponent}
];
在用户输入凭证(并且它们是正确的)之后,存在显示登录表单的"基本"路径,用户将被定向到"开始"并且这被作为嵌套路由"嵌套".这非常有效.但是如果用户没有登录,我想以某种方式限制用户访问"开始"和"嵌套".因为目前只需将其作为URL输入即可.
我的index.html看起来像这样:
<body>
<app-root>Loading...</app-root>
</body>
app.component:
@Component({
selector: "app-root",
template: `
<router-outlet></router-outlet>
`,
styleUrls: ['./app.component.css']
})
start.component
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo center"></a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a (click)="logout()">Logout</a></li>
</ul>
</div>
</nav>
<router-outlet></router-outlet>
因为一切都以某种方式嵌套在我的方法中是检查app.component,如果用户使用以下方式登录:
export class AppComponent {
constructor(af:AngularFire, router:Router){
if(af.auth.getAuth() == null){
//redirect to start
console.log('redirect to login');
router.navigate(['']);
}else{
console.log('not redirect to login');
}
}
}
这样可以正确检测用户是否应该重定向.但是,router.navigate(['']);不起作用.它什么都不做.
使用CanActivate,您可以允许用户只有在路由中激活页面或将其重定向到登录页面才能访问页面.
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CanActivateAuthGuard } from './auth.service'
import { MyComponent } from './app.component';
const routes: Routes = [
{ path: '/home', component: MyComponent , canActivate: [CanActivateAuthGuard]}]
/ 在授权服务 /
import { CanActivate, Router } from '@angular/router';
@Injectable()
export class CanActivateAuthGuard implements CanActivate {
constructor(private router: Router) {}
if (this.authService.isLoggedIn()) {
return true;
}
//Redirect the user before denying them access to this route
this.router.navigate(['/login']);
return false;
}
| 归档时间： |
|
| 查看次数： |
3987 次 |
| 最近记录： |