2017-02-16 4 views
0

私はreact-starter-kitとuniversal routerでpassport-jsを使用していますが、サーバ側で処理されるいくつかの/ loginルートがあります。クライアントサイドではなく、ルートURLからサーバ側のフェッチを強制する方法はありますか?サーバ側でのルートの強制的な設定方法

たとえば、URLから直接/ logoutに行くと、正しいサーバー側のログアウトがトリガーされます。しかし、クライアント側からブラウザの/ logoutリンクをクリックすると、クライアント側のルーティングを行っているためにページが見つかりません。また、/ログアウトはルートに定義されていません。サーバから直接配信されるルートオブジェクトを定義することは可能ですか?あなたは/ログアウトリンクをクリックすることができるようにしたい

ルート/ index.js

export default { 

    path: '/', 

    // Keep in mind, routes are evaluated in order 
    children: [ 
    require('./home').default, 
    require('./contact').default, 
    require('./register').default, 
    require('./termsOfUse').default, 
    require('./privacyPolicy').default, 
    require('./invites').default, 
    require('./collection').default, 
    require('./profile').default, 
    require('./content').default, 
    require('./notFound').default, 
    // Wildcard routes, e.g. { path: '*', ... } (must go last) 
    ], 

    async action({ next }) { 
    // Execute each child route until one of them return the result 
    const route = await next(); 

    // Provide default values for title, description etc. 
    route.title = `${route.title}`; 
    route.description = route.description || ''; 

    return route; 
    }, 

}; 

client.js

sync function onLocationChange(location) { 
    // my workaround is to put a special case for login and logout 
    // but it feels a bit of a hack since this logic should be set in the routing 
    // config if possible 
    if (location.pathname === '/login' || location.pathname === '/logout') { 
    // break - let passport.js handle it via server-side 
    window.location.reload(); 
    return; 
    } 

    ... 
    currentLocation = location; 

    try { 
    // Traverses the list of routes in the order they are defined until 
    // it finds the first route that matches provided URL path string 
    // and whose action method returns anything other than `undefined`. 
    const route = await UniversalRouter.resolve(routes, { 
     ...context, 
     path: location.pathname, 
     query: queryString.parse(location.search), 
    }); 

    // Prevent multiple page renders during the routing process 
    if (currentLocation.key !== location.key) { 
     return; 
    } 

    if (route.redirect) { 
     history.replace(route.redirect); 
     return; 
    } 

    const component = (
     <App context={context}> 
     <ApolloProvider client={context.client} store={context.store}> 
      {route.component} 
     </ApolloProvider> 
     </App> 
    ); 

    appInstance = ReactDOM.render(
     component, 
     container, 
    () => onRenderComplete(route, location), 
    ); 
    } catch (error) { 
    console.error(error); // eslint-disable-line no-console 

    // Current url has been changed during navigation process, do nothing 
    if (currentLocation.key !== location.key) { 
     return; 
    } 

    // Display the error in full-screen for development mode 
    if (process.env.NODE_ENV !== 'production') { 
     appInstance = null; 
     document.title = `Error: ${error.message}`; 
     ReactDOM.render(<ErrorReporter error={error} />, container); 
     return; 
    } 

    // Avoid broken navigation in production mode by a full page reload on error 
    window.location.reload(); 
    } 
} 
+0

それを見つけたことを意味しましたクライアントでは、いくつかのページにリダイレクトし、サーバー側も同様に応答しますか? –

+0

はい同形のクライアント側ルーティングではなく、通常のhttpリンクとして動作するようにしたい - 明示的なページロードをしたい。現在のところ、私の修正はclient.jsに入って、ルートが/ loginのケースを掘り下げることですが、それが正しいかどうかはわかりません – MonkeyBonkey

答えて

0

here

<Link to="/someurl" target="_self">...</Link> 
関連する問題