2017-02-16 82 views
0

我使用的是带有react-starter-kit和通用路由器的passport-js,并且有一些/登录路由在服务器端处理。有什么办法强制服务器端从路由url获取而不是客户端?如何强制路由的服务器端服务

例如,如果我直接从/ url登出/注销,它会触发正确的服务器端注销。但是,如果我从客户端单击浏览器上的/注销链接,则会出现页面未找到错误,因为它正在执行客户端路由,并且/注销未在路由中定义。是否有可能定义一个必须直接从服务器获得服务的路由对象?

路线/ 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>