Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/362.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何在react js中实现简单的身份验证中间件_Javascript_Reactjs - Fatal编程技术网

Javascript 如何在react js中实现简单的身份验证中间件

Javascript 如何在react js中实现简单的身份验证中间件,javascript,reactjs,Javascript,Reactjs,我是一个刚开始学习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';

我是一个刚开始学习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();

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;
这是我的授权书。

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

感谢美丽的人们……

如果用户未登录,请尝试使用HOC重定向到登录页面。inOkay@uneet7让我试试。感谢回复:)