React, React-Router, access-token and session time out

I have difficult to take the next step in my solution, and I would much appreciate any help. :)

The LoginForm component is used to authenticate and if success, an access-token will be returned and stored in localStorage.

I try to implement some kind of session time out function that will redirect the user to the LoginForm component if the access-tokens has run out of time. I have created an api endpoint for this and try to use it in the onEnter hook function for the protected routes.

The redirectToLogin function do a call to this endpoint and if error it should redirecto to the LoginForm. The LoginForm always check if the access token exist in local storage, if so, it "knows" a session time out has happened and can display a proper message.

The problem seems that the redirectToLogin function only executes when I navigate from the / route to a protected route and not when I navigate lets say between /users to /users/:id

I'm sure I do not unserstand the router properly and I really really would appreciate any help?

My routing logic looks like this.

let routes = {    // Base component render an AppBar component and if the access token    // is stored in localStorage, the Dasboard component will be rendered,   // otherwise the Home component.   Component: Base    childroutes: [        { path: '/',       getComponent: (nextState, cb) => {          // Dynamically load the correct component         if (Client.hasAccessToken()) {           cb(null, Dashboard)         }         else {           cb(null, Home)         }       }     },     // Public routes     { path: '/login',       component: LoginForm     },     ...     // Protected routes that requires authentication     { onEnter: redirectToLogin,       childRoutes: [         { path: '/users',           getComponent: (nextState, cb) => {             cb(null, UserTable)           }         },         { path: '/users/:id',           getComponent: (nextState, cb) => {             cb(null, UserEdit)           }         },         ....      ]     }   ] 

Replay

Category: session Time: 2016-07-31 Views: 3

Related post

iOS development

Android development

Python development

JAVA development

Development language

PHP development

Ruby development

search

Front-end development

Database

development tools

Open Platform

Javascript development

.NET development

cloud computing

server

Copyright (C) avrocks.com, All Rights Reserved.

processed in 0.123 (s). 12 q(s)