路由登录登出

.env.development

@@ -0,0 +1 @@
+PUBLIC_URL = '/'

.eslintrc.js

@@ -170,7 +170,7 @@ module.exports = {
     'max-nested-callbacks': [0, 2], // 回调嵌套深度
     // "max-params": [0, 3], // 函数最多只能有3个参数
     'max-statements': [0, 10], // 函数内最多有几个声明
-    'new-cap': 2, // 函数名首行大写必须使用new方式调用，首行小写必须用不带new方式调用
+    'new-cap': 0, // 函数名首行大写必须使用new方式调用，首行小写必须用不带new方式调用
     'new-parens': 2, // new时必须加小括号
     'newline-after-var': 0, // 变量声明后是否需要空一行
     'object-curly-spacing': [1, 'always'], // 大括号内是否允许不必要的空格

config-overrides.js

@@ -0,0 +1,17 @@
+const {
+  override,
+  addWebpackAlias
+} = require("customize-cra")
+
+const path = require("path")
+// const resolve = dir => path.join(__dirname, dir)
+function resolve(dir) {
+  return path.join(__dirname, dir)
+}
+
+module.exports = override(
+  // 配置路径别名
+  addWebpackAlias({
+    "@": resolve("src")
+  }),
+)

package.json

@@ -8,11 +8,14 @@
     "@testing-library/user-event": "^13.5.0",
     "antd": "^4.18.4",
     "axios": "^0.25.0",
+    "customize-cra": "0.9.1",
     "global": "^4.4.0",
     "immutable": "^4.0.0",
     "js-cookie": "^3.0.1",
     "react": "^17.0.2",
+    "react-app-rewired": "^2.1.11",
     "react-dom": "^17.0.2",
+    "react-loadable": "^5.5.0",
     "react-redux": "^7.2.6",
     "react-router-dom": "5.1.2",
     "react-scripts": "5.0.0",
@@ -22,9 +25,9 @@
     "web-vitals": "^2.1.2"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
+    "start": "react-app-rewired start",
+    "build": "react-app-rewired build",
+    "test": "react-app-rewired test",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {

src/App.js

@@ -1,14 +1,14 @@
+import { Provider } from 'react-redux'
+import Router from './router'
+import store from './store'
 import 'antd/dist/antd.min.css'
 import './styles/index.scss'
-import RouterMap from './router'
-import { Provider } from 'react-redux'
-import store from './redux/store'
 
 export default () => {
   return (
     <div className="App">
       <Provider store={store}>
-        <RouterMap />
+        <Router/>
       </Provider>
     </div>
   )

src/api/user.js

@@ -1,9 +1,18 @@
 import request from '../utils/request'
 
+// 登录
 export function login(data) {
   return request({
     url: '/api/authentication/login',
     method: 'post',
     data
   })
+}
+
+// 登出
+export function logout() {
+  return request({
+    url: '/api/authentication/logout',
+    method: 'get'
+  })
 }

src/components/Loading/index.jsx

@@ -0,0 +1,23 @@
+import React, { useEffect } from "react"
+import { Spin } from "antd"
+// import NProgress from "nprogress" // progress bar
+// import "nprogress/nprogress.css" // progress bar style
+
+// NProgress.configure({ showSpinner: false }) // NProgress Configuration
+
+const Loading = () => {
+  useEffect(() => {
+    // NProgress.start()
+    return () => {
+    //   NProgress.done()
+    }
+  }, [])
+
+  return (
+    <div className="app-container">
+      <Spin />
+    </div>
+  )
+}
+
+export default Loading

src/config/routeMap.js

@@ -0,0 +1,10 @@
+import Loadable from 'react-loadable'
+import loading from '@/components/Loading'
+
+const Home = Loadable({ loader: () => import(/*webpackChunkName:'Home'*/'@/pages/home'), loading })
+const Error404 = Loadable({ loader: () => import(/*webpackChunkName:'Error404'*/'@/pages/404'), loading })
+
+export default [
+  { path: "/home", component: Home, roles: ["admin"] },
+  { path: "/404", component: Error404 }
+]

src/layout/Content/index.jsx

@@ -0,0 +1,35 @@
+import React, { Component } from 'react'
+import { Redirect, withRouter, Route, Switch } from "react-router-dom"
+import { connect } from 'react-redux'
+import routeList from "@/config/routeMap"
+
+// class Content extends Component {
+
+//   render() {
+//     return <div></div>
+//   }
+// }
+
+const LayoutContent = props => {
+  const { role, location } = props
+  //   const { pathname } = location
+  //   const handleFilter = (route) => {
+  //     // 过滤没有权限的页面
+  //     return role === "admin" || !route.roles || route.roles.includes(role)
+  //   }
+  return (
+    <Switch location={location}>
+      <Redirect exact from="/" to="/home" />
+      {
+        routeList.map(route => {
+          return (
+          // handleFilter
+            <Route component={route.component} key={route.path} path={route.path} />
+          )
+        })
+      }
+    </Switch>
+  )
+}
+
+export default connect()(LayoutContent)

src/layout/Header/components/User.jsx

@@ -0,0 +1,15 @@
+import React, { Component } from 'react'
+import{ loginOut } from '@/store/actions/user'
+import { connect } from 'react-redux'
+class User extends Component {
+
+  out = () => {
+    this.props.loginOut()
+  }
+
+  render() {
+    return <button className="user" onClick={this.out}>退出登录</button>
+  }
+}
+
+export default connect(null, { loginOut })(User)

src/layout/Header/index.jsx

@@ -0,0 +1,26 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+import { connect } from 'react-redux'
+import User from './components/User'
+import './index.scss'
+
+const linkList = [
+  { to: "/home", name: 'Home' },
+  { to: "/404", name: '404' }
+]
+
+class Header extends Component {
+  render() {
+    return (
+      <div className="header">
+        {
+          linkList.map(link => {
+            return <Link key={link.name} to={link.to} >{link.name}</Link>
+          })
+        }
+        <User></User>
+      </div>  
+	  ) 
+  }
+}
+export default connect()(Header)

src/layout/Header/index.scss

@@ -0,0 +1,18 @@
+.header {
+	display: flex;
+	justify-content: space-around;
+	align-items: center;
+	background-color: pink;
+	height: 40px;
+	a {
+		width: 100px;
+		text-align: center;
+		background-color: yellow;
+	}
+	.user {
+		position: absolute;
+		right: 10px;
+		cursor: pointer;
+		// background-color: green;
+	}
+}

src/layout/components/Navbar/index.jsx

@@ -0,0 +1,23 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import { loginOut } from '../../../store/actions/user'
+// import { loginOut } from '../../store/actions/user'
+
+class Narbar extends Component {
+	loginOut = () => {
+	  this.props.loginOut()
+	}
+
+	render() {
+	  return <button onClick={this.loginOut}>退出登录</button>
+	}
+
+}
+export default connect(
+  state => ({
+    userInfo: state.userInfo
+  }),
+  {
+    loginOut
+  }
+)(Narbar)

src/layout/index.jsx

@@ -0,0 +1,19 @@
+import React, { Component } from 'react'
+import Navbar from './components/Navbar'
+import Header from './Header'
+import Content from './Content'
+// import RouterMap from '../router'
+
+class index extends Component {
+  render() {
+    return (
+      <div>
+        <Header />
+        <Content/>
+        {/* <Navbar /> */}
+        {/* <RouterMap/> */}
+      </div>
+    )
+  }
+}
+export default index

src/pages/home/index.jsx

@@ -1,23 +1,15 @@
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
-import { loginOut } from '../../redux/acitons/login'
 
 class Home extends Component {
 
-  loginOut = () => {
-    this.props.loginOut()
-  }
-
   render() {
-    return <button onClick={this.loginOut}>退出登录</button>
+    return <div>home</div>
   }
 }
 
 export default connect(
   state => ({
     userInfo: state.userInfo
   }),
-  {
-    loginOut
-  }
 )(Home)

src/pages/login/index.jsx

@@ -1,13 +1,13 @@
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
-import { loginIn } from '../../redux/acitons/login'
+import { loginIn } from '../../store/actions/user'
 import { Form, Input, Button, Checkbox } from 'antd'
 import { Redirect } from 'react-router-dom'
 class Login extends Component {
 
   // login = () => {
   //   if (this.username.value && this.password.value) {
-  //     this.props.loginIn(this.username.value, this.password.value)
+  //     this.props.LOGIN_IN(this.username.value, this.password.value)
   //   } else {
   //     alert('请输入账号密码')
   //   }
@@ -18,12 +18,11 @@ class Login extends Component {
 	}
 
 	onFinishFailed = (errorInfo) => {
-	//   console.log('Failed:', errorInfo)
+	  console.log('Failed:', errorInfo)
 	};
 
 	render() {
 	  const { token } = this.props
-	  console.log(token)
 	  if (!token) {
 	    return (
 	    //   <div>