angular4如何管理导航？

Question

1. 使用angular的路由时，在页面点击了一个路由链接后会转到目标组件，而且浏览器上的url也是跟着变的。如果手动在浏览器上修改相同链接，发现不能跳转到目标组件。我知道是浏览器去访问服务器的url了，所以不能转到目标组件。那么如何让angular阻止在浏览器上的跳转？
2. 或者说有什么方法来管理导航？

Answer 1

angular针对你说的这个情况提供了解决方案了，
router里面提供了两个接口[canActivate][1] 和 [CanDeactivate][2]

你可以根据你自己的需求，实现这两个接口，并配置在router里面，这两个接口就相当于router的guard，在跳转之前先调用你的处理逻辑。

这是官方的例子：

class UserToken {}
class Permissions {
  canDeactivate(user: UserToken, id: string): boolean {
    return true;
  }
}

@Injectable()
class CanDeactivateTeam implements CanDeactivate<TeamComponent> {
  constructor(private permissions: Permissions, private currentUser: UserToken) {}

  canDeactivate(
    component: TeamComponent,
    currentRoute: ActivatedRouteSnapshot,
    currentState: RouterStateSnapshot,
    nextState: RouterStateSnapshot
  ): Observable<boolean>|Promise<boolean>|boolean {
    return this.permissions.canDeactivate(this.currentUser, route.params.id);
  }
}

@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: 'team/:id',
        component: TeamCmp,
        canDeactivate: [CanDeactivateTeam]
      }
    ])
  ],
  providers: [CanDeactivateTeam, UserToken, Permissions]
})
class AppModule {}

Answer 2

前后端分离，分开部署，使用nginx部署angular