Routing MVC6 do aplikacji jednostronicowej bez utraty 404

Question

Piszę aplikację jednostronicową z kątami 2 i MVC5. Jestem jednak nowicjuszem i mam problem z routingiem.

Chciałbym dopasować adresy jak:

• / -> przejdź do mojej strony indeksu, który bootstraps kątowe
• /api/{controller}/{id?}
-> REST API
• /{*anythingelse} -> jeśli plik istnieje tam , zwróć go jako statyczną treść; w przeciwnym razie, jeśli kanciasty może go poprowadzić, należy wyznaczyć trasę kątową; w przeciwnym razie zwróci 404.

Drugi punkt jest dość łatwy, i mogę sprawić, że routing po stronie klienta będzie działał, jeśli będę chciał zrezygnować z 404 zwrotów, ale nie mogę tego pogodzić.

Wydaje się, że to powinno działać:

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" }); 
}); 

oraz:

@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 }, 
]) 

Ale to właśnie służy Index.cshtml dla każdego wniosku, że nie jest plikiem statycznym.

Czuję, że to już musi być rozwiązany problem, ale nie udało mi się znaleźć niczego w Internecie. Jak to zrobić właściwie?

Używam ścieżek w stylu "HTML5", a nie w stylu mieszania.

Answer 1

Są dwa sposoby na zrobienie tego. Jeśli używasz HashLocationStrategy, zdecydowanie zachęcam do zrobienia tego przy implementacji po stronie serwera, ponieważ okazało się, że łatwiej sobie z tym poradzić.

W przeciwnym razie można utworzyć własny składnik RouterOutlet, który obsługuje wyjątki. Nie jestem w 100% jasne, w jaki sposób można uzyskać go do pracy z RouterConfig, ponieważ nie zagłębiłem się głęboko w aspekt routingu, ale założę się, że można zobaczyć, czy istnieje trasa, a następnie przejdź w przeciwnym razie 404 błąd. Oto mój kod, który zajmuje się sprawdzaniem, czy użytkownik jest zalogowany przy użyciu tokenów 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); 
    } 
} 

Jak widać obsłużyć mój sprawdzanie na zasadzie, a jeśli nie mają one token mogą iść tylko do mojej strony logowania. Następnie w komponencie app.component lub bootstrapped używaj tego jako gniazda routera zamiast oryginału.

Przykro mi, ale nie mogę być bardziej pomocny, ale mam nadzieję, że to pozwoli ci wskazać właściwy kierunek!

Answer 2

myślę szukasz regex przymusu Trasa:

routes.MapRoute("app", "{*anything}", 
    new { controller = "Home", action = "Index" }, 
    new {anything = new RegexRouteConstraint("^(?!api\\/).+") }); 

Zapobiegnie to złapać wszystkie trasy od mapowania na każdy wniosek, który zaczyna się od „api /”