我正在用angular2和MVC5编写单页应用程序.不过,我对两者都很陌生,而且我在路由方面遇到了麻烦.
我想将网址匹配为：
> / – >转到我的索引页面,它引导角度
> / api / {controller} / {id？} – > REST API
> / {* anythingelse} – >如果存在文件,则将其作为静态内容返回;否则,如果角度可以路由它,有角度路线;否则返回404.
第二点很容易,如果我愿意放弃404返回,我可以让客户端路由工作,但我似乎无法调和它.
看起来应该这样：
app.UseStaticFiles();
app.UseMvc(routes =>
{
routes.MapRoute(
name: "api",template: "api/{controller}/{id?}");
routes.MapRoute(
name: "spa",template: "{*anythingelse}",defaults: new { controller = "Home",action = "Index" });
});
和：
@RouteConfig([
{ path: "/",name: 'Splash',component: SplashView },{ path: '/accounts/login',name: 'Login',component: LoginView },{ path: '/accounts/register',name: 'Registration',component: RegistrationView },{ path: '/home/...',name: 'Home',component: HomeView },])
但是,这只是为每个不是静态文件的请求提供Index.cshtml.
我觉得这已经是一个已经解决的问题,但我无法在网上找到任何关于它的信息.如何正确地做到这一点？
我使用的是“HTML5”风格的路径,而不是散列风格.
解决方法
所以有两种方法可以做到这一点.如果您正在使用HashLocationStrategy,我强烈建议您在服务器端实现这样做,因为我发现它更容易处理.
否则,您可以创建自己的RouterOutlet组件来处理异常.我不是100％清楚如何让它与你的RouterConfig一起工作,因为我没有深入研究路由方面,但我打赌你可以看到是否存在路由然后去那里否则404错误.这是我的代码,用于查看用户是否使用Json Web令牌登录.
import {Directive,Attribute,ElementRef,DynamicComponentLoader} from 'angular2/core';
import {Router,RouterOutlet,ComponentInstruction} from 'angular2/router';
@Directive({
selector: 'router-outlet'
})
export class LoggedInRouterOutlet extends RouterOutlet {
publicRoutes: any;
private parentRouter: Router;
constructor(_elementRef: ElementRef,_loader: DynamicComponentLoader,_parentRouter: Router,@Attribute('name') nameAttr: string) {
super(_elementRef,_loader,_parentRouter,nameAttr);
this.parentRouter = _parentRouter;
}
activate(instruction: ComponentInstruction) {
if (!localStorage.getItem('jwt') || !tokenNotExpired('jwt')) {//Public Routes does not work with Hash Location Strategy,need to come up with something else.
// todo: redirect to Login,may be there is a better way?
if(localStorage.getItem('jwt')){
localStorage.removeItem('jwt');
}
this.parentRouter.navigate(['Login']);
}
return super.activate(instruction);
}
}
正如您所看到的,我处理了对Token的检查,如果他们没有令牌,他们只能进入我的登录页面.然后在你的app.component或你的bootstrapped组件中使用它作为你的路由器插座而不是原来的.
对不起,我不能提供更多帮助,但我希望这能让你指出正确的方向！
