react项目笔记14-----登陆与退出功能（主要是设置代理）

首先create-react-app中查找目录如下

首先引入依赖，并在src下穿件setupProxy.js文件

引入依赖代码
npm install http-proxy-middleware --save
setupProxy.js文件代码
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
  app.use('/api', createProxyMiddleware({
      target: 'http://localhost:3001/',
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      }
    })
  );
}

登陆之后保存在本地存储用户名和密码并跳转到登陆页修改login.jsx 中onFinish函数代码

const onFinish = values => {

    login(values).then(res => {
      console.log(res.data)
      const { code } = res.data
      if (code === '10010') {
        message.error('登录信息有误', 2)
      } else {
        message.success('登录成功', 2)
        localStorage.setItem('isLogin', true)
        localStorage.setItem('role', res.data.data.role)
        props.history.push('/')
      }
    })
    
  };

登陆后点击退出代码修改TopHeader.jsx代码

<Menu onClick = { () => {
     localStorage.removeItem('isLogin')
      localStorage.removeItem('role')
      this.props.history.push('/login')
    }}>

判断是否登陆需要修改App.js文件

<Route path="/" render= { () => {
            return localStorage.getItem('isLogin') === 'true' ?
            <Route path="/" component= { Default } /> : 
            <Redirect to="/login" /> 
          }} />