javascript - 如何在 React js 中实现简单的身份验证中间件

Question

我是一个刚开始学习 reactjs 的新手，对我来说有些东西在这里和那里。我想实现一个基本的中间件，在呈现应用程序之前检查用户的令牌是否正确。我目前陷入困境:(任何帮助将不胜感激

这是我的 index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './res/scss/app.scss';
import './res/css/theme.css';
import store from './Store';
// eslint-disable-next-line
import VerifyAuth from './components/VerifyAuth';
import Login from './views/auth/Login';
import {Provider} from 'react-redux';
import * as serviceWorker from './serviceWorker';
import { createBrowserHistory } from 'history';
// eslint-disable-next-line
import {Router, Route} from 'react-router';

// Import views
import Home from './views/Home';

const history = createBrowserHistory();
ReactDOM.render((
  <Provider store = {store}>
      <Router history = {history}>
          <Route component = {VerifyAuth}>
              <Route exact path = '/' component = {Home}></Route>
              <Route path = '/login' component = {Login}></Route>
          </Route>
      </Router>
  </Provider>
), document.getElementById('root'));

serviceWorker.unregister();

这是我的 Store.js

import UserReducer from './reducers/UserReducer';
import AuthReducer from './reducers/AuthReducer';
import {combineReducers, createStore, applyMiddleware} from 'redux';

const fetch = (url, params) => ({
    type: 'AUTH.CHECK'
});

const defaultProps = {
    authenticated: false,
    inc: 0
};

const reducers = combineReducers({
    user: UserReducer,
    auth: AuthReducer
});

const authCheck = fetchImplementation => (store) => (next) => (action) => {
    if (action.type === 'AUTH.CHECK') {
        console.log(fetch);
        return fetchImplementation(window.fetch);
    }else{
        console.log('middleware dispatched....', action);
        next(action);
    }
};

const middleware = applyMiddleware(authCheck);

const store = createStore(reducers, defaultProps, middleware);

store.subscribe(() => {
    console.log('update', store.getState());
});

export default store;

这是我的 AuthReducer。

export default function(state = {}, action) {
    switch(action.type) {
        case 'AUTH.CHECK':
            // what do i do now
            return true;
        default:
            return state
    }
};

感谢美丽的人们......

标签： javascriptreactjs