Redirect using react-router in redux middleware

Question

I've created a middleware that checks if a request returns an invalid access response. If the status is a 401, I want to redirect the user to the login page

Here's the middleware code

import React from 'react';
import { push, replace } from 'react-router-redux';

const auth_check = ({ getState }) =>  {
  return (next) => (action) => {
    if(action.payload != undefined && action.payload.status==401){
        push('login');
        console.log('session expired'); 
    }
    // Call the next dispatch method in the middleware chain.
    let returnValue = next(action);

    return returnValue
  }
}

export default auth_check;

Including it in index.js

...

const store = createStore(reducers, undefined, 
            compose(
                applyMiddleware(promise,auth_check)
                )
            );
const history = syncHistoryWithStore(browserHistory, store);

ReactDOM.render(
  <Provider store={store}>
    <Router history={history} routes={routes} />
  </Provider>
  , document.querySelector('.app'));

The push method does not redirect the page. I am sure that the code goes through that section since the log is showing

check out my answer below, I hope that I have helped you.

Kokovin Vladislav
– Kokovin Vladislav

2016-06-25 19:29:25 +00:00
Commented Jun 25, 2016 at 19:29 — Kokovin Vladislav
– Kokovin Vladislav, Commented Jun 25, 2016 at 19:29

Kokovin Vladislav · Accepted Answer · 2016-06-26 06:48:50Z

if you prefer Redux style actions, the library also provides a set of action creators and a middleware to capture them and redirect them to your history instance.

for: push(location), replace(location), go(number), goBack(), goForward()

You must install routerMiddleware for these action creators to work.

import { routerMiddleware, push } from 'react-router-redux'

// Apply the middleware to the store
const middleware = routerMiddleware(browserHistory)
const store = createStore(
  reducers,
  applyMiddleware(middleware)
)

// Dispatch from anywhere like normal.
store.dispatch(push('/foo'))

Also React Router provides singleton versions of history (browserHistory and hashHistory) that you can import and use from anywhere in your application.

import { browserHistory } from 'react-router'

if(action.payload != undefined && action.payload.status==401){
        browserHistory.push('login');
        console.log('session expired'); 
}

btw for check auth you may use onEnter or redux-auth-wrapper

Vikramaditya · Accepted Answer · 2016-06-22 06:49:24Z

1

use onEnter method of react-router. call a function which will check for the access. Example:

function checkAccess() {
   //some logic to check 
    if(notAuthorized){ window.location.href= "/login"; }
  }

answered Jun 22, 2016 at 6:49

Vikramaditya

5,5947 gold badges37 silver badges47 bronze badges

1 Comment

horyd Over a year ago

The question is concerning how to re-route based on a specific action that is dispatched to the store, which isn't strictly attached to the process of entering a route. Also, the second argument of an onEnter function is replace, which is the formal way to specify a new route to go to.

Collectives™ on Stack Overflow

Redirect using react-router in redux middleware

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related