Authentifizierung Aktualisieren Token

Question

Erstellen eines Anmeldeformulars mit Reactjs, Redux, Axios und Redux-Thunk. Ich habe zwei Tokens - eine mit dem Namen access token und refresh token.

Wenn der Benutzer authentifiziert ist, speichern Sie die access token, die für 12 Stunden dauern soll. Die refresh token ist ebenfalls vorgesehen und wird 30 Tage dauern.

Sobald die access token abgelaufen ist, müssen Sie den Zeitstempel (Datum) überprüfen, wenn access token abgelaufen ist. Wie kann ich die access token einmal abgelaufen aktualisieren? Token-Daten wie folgt aussehen, so habe ich einen Zeitstempel überprüfen gegen:

{ 
    "access_token": "toolongtoinclude", 
    "token_type": "bearer", 
    "refresh_token": "toolongtoinclude", 
    "expires_in": 43199, 
    "scope": "read write", 
    "roles": [ 
    "USER" 
    ], 
    "profile_id": "b4d1e37d-7d05-4eb3-98de-0580d3074a0d", 
    "jti": "e975db65-e3b7-4034-a6e4-9a3023c3d175" 
} 

Hier sind meine Aktionen zu speichern, und Update-Token aus dem Speicher. Ich bin mir nicht sicher, wie ich das Token aktualisieren soll.

export function submitLoginUser(values, dispatch) { 
    dispatch({type: constants.LOADING_PAGE, payload: { common: true }}) 
    return axios.post(Config.API_URL + '/oauth/token', { 
      username: values.email, 
      password: values.password, 
      scope: Config.WEBSERVICES_SCOPE, 
      grant_type: Config.WEBSERVICES_GRANT_TYPE_PASSWORD 
     }, 
     { 
      transformRequest: function (data) { 
       var str = []; 
       for (var p in data) { 
        str.push(encodeURIComponent(p) + '=' + encodeURIComponent(data[p])); 
       } 

       return str.join('&'); 
      }, 
      headers: { 
       'Authorization': 'Basic ' + window.btoa(Config.WEBSERVICES_AUTH), 
       'Content-Type': 'application/x-www-form-urlencoded' 
      } 
     }) 
     .then(response => { 
      const {access_token, refresh_token} = response.data; 
      dispatch({type: constants.LOADING_PAGE, payload: { common: false }}) 
      dispatch({ 
       type: constants.LOGIN_SUCCESS, 
       payload: { 
        access_token: access_token, 
        refresh_token: refresh_token 
       } 
      }); 
      saveTokens(response) 
      browserHistory.push('/questions'); 
      refreshToken(response); 
     }) 
     .catch(error => { 
      dispatch({type: constants.LOADING_PAGE, payload: { common: false }}) 
      //401 Error catch 
      if(error.response.status === 401) { 
       throw new SubmissionError({username: 'User is not authenticated', _error: message.LOGIN.loginUnAuth}) 
      } 
      //Submission Error 
      throw new SubmissionError({username: 'User does not exist', _error: message.LOGIN.loginFailed}) 
     }) 
} 

/** 
* Save tokens in local storage and automatically add token within request 
* @param params 
*/ 
export function saveTokens(params) { 
    const {access_token, refresh_token} = params.data; 
    localStorage.setItem('access_token', access_token); 
    if (refresh_token) { 
     localStorage.setItem('refresh_token', refresh_token); 
    } 
    //todo fix this later 
    getinstanceAxios().defaults.headers.common['Authorization'] = `bearer ${access_token}` 
} 

/** 
* 
*/ 
export function getTokens() { 
    let accessToken = localStorage.getItem('access_token'); 
    return accessToken 
} 

/** 
* update the get requests 
*/ 
export function updateTokenFromStorage() { 
    const tokenLocalStorage = getTokens(); 
    getinstanceAxios().defaults.headers.common['Authorization'] = `bearer ${tokenLocalStorage}`; 
} 

/** 
* Refresh user access token 
*/ 
export function refreshToken(dispatch) { 
    //check timestamp 
    //check access expired - 401 

    //request new token, pass refresh token 
    //store both new access and refresh tokens 

} 

Answer 1

Check this out:

https://github.com/mzabriskie/axios#interceptors

ich denke, das Ihnen helfen kann. Sie fangen Ihre Anfrage ab und machen Ihre Validierungen.

EDIT

Hier ist der Code, ich habe versucht, in meinem Speicher verwenden

import { createStore, applyMiddleware, compose } from 'redux' 
import { devTools, persistState } from 'redux-devtools' 
import axios from 'axios' 
import Middleware from '../middleware' 
import Reducer from '../reducers/reducer' 
import DevTools from '../containers/DevTools' 

let finalCreateStore 

if (__DEVELOPMENT__ && __DEVTOOLS__) { 

    finalCreateStore = compose(
    applyMiddleware.apply(this, Middleware), 
    // Provides support for DevTools: 
     DevTools.instrument(), 
    // Optional. Lets you write ?debug_session=<key> in address bar to persist debug sessions 
    persistState(getDebugSessionKey()) 
)(createStore) 
} else { 
    finalCreateStore = compose(
    applyMiddleware.apply(this, Middleware) 
)(createStore) 
} 

function getDebugSessionKey() { 
    // You can write custom logic here! 
    // By default we try to read the key from ?debug_session=<key> in the address bar 
    const matches = window.location.href.match(/[?&]debug_session=([^&]+)\b/) 
    return (matches && matches.length > 0)? matches[1] : null 
} 

axios.interceptors.response.use((err) => { 
    if (err.status === 401) { 
     console.log('ACCESS TOKEN EXPIRED!'); 
    } 
}); 


export const store = finalCreateStore(Reducer)