mirror of
https://github.com/YMFE/yapi.git
synced 2024-12-21 05:19:42 +08:00
fix: 修复未登录时的路由地址未改变
This commit is contained in:
parent
1a3015a8c4
commit
a4a824031a
@ -1,19 +1,26 @@
|
|||||||
import React, { Component } from 'react'
|
import React, { Component } from 'react'
|
||||||
import { connect } from 'react-redux'
|
import { connect } from 'react-redux'
|
||||||
import PropTypes from 'prop-types'
|
import PropTypes from 'prop-types'
|
||||||
import { Route, HashRouter, Redirect, Switch } from 'react-router-dom'
|
import { Route, HashRouter } from 'react-router-dom'
|
||||||
import { Home, ProjectGroups, Interface, News, AddInterface } from './containers/index'
|
import { Home, ProjectGroups, Interface, News, AddInterface } from './containers/index'
|
||||||
import User from './containers/User/User.js'
|
import User from './containers/User/User.js'
|
||||||
import Header from './components/Header/Header'
|
import Header from './components/Header/Header'
|
||||||
import { checkLoginState } from './actions/login'
|
import { checkLoginState } from './actions/login'
|
||||||
|
import { requireAuthentication } from './components/AuthenticatedComponent';
|
||||||
|
|
||||||
const LOADING_STATUS = 0;
|
const LOADING_STATUS = 0;
|
||||||
const GUEST_STATUS = 1;
|
|
||||||
// const MEMBER_STATUS = 2;
|
|
||||||
|
|
||||||
|
|
||||||
class App extends Component {
|
|
||||||
|
|
||||||
|
@connect(
|
||||||
|
state => {
|
||||||
|
return{
|
||||||
|
loginState:state.login.loginState
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
checkLoginState
|
||||||
|
}
|
||||||
|
)
|
||||||
|
export default class App extends Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.state = {
|
this.state = {
|
||||||
@ -24,59 +31,32 @@ class App extends Component {
|
|||||||
checkLoginState:PropTypes.func,
|
checkLoginState:PropTypes.func,
|
||||||
loginState:PropTypes.number
|
loginState:PropTypes.number
|
||||||
}
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
this.props.checkLoginState();
|
||||||
|
}
|
||||||
route = (status) => {
|
route = (status) => {
|
||||||
let r;
|
let r;
|
||||||
if (status === LOADING_STATUS) {
|
if (status === LOADING_STATUS) {
|
||||||
return <span>loading...</span>
|
return <span>loading...</span>
|
||||||
} else if (status === GUEST_STATUS) {
|
|
||||||
r = (
|
|
||||||
<HashRouter>
|
|
||||||
<div className="router-main">
|
|
||||||
<Header />
|
|
||||||
<Switch>
|
|
||||||
<Route
|
|
||||||
path="/"
|
|
||||||
component={Home}/>
|
|
||||||
<Redirect from="(/:str)" to="/" />
|
|
||||||
</Switch>
|
|
||||||
</div>
|
|
||||||
</HashRouter>
|
|
||||||
)
|
|
||||||
} else {
|
} else {
|
||||||
r = (
|
r = (
|
||||||
<HashRouter>
|
<HashRouter>
|
||||||
<div className="router-main">
|
<div className="router-main">
|
||||||
<Header />
|
<Header />
|
||||||
<Route path="/" component={Home} exact />
|
<Route path="/" component={Home} exact />
|
||||||
<Route path="/ProjectGroups" component={ProjectGroups} />
|
<Route path="/ProjectGroups" component={requireAuthentication(ProjectGroups)} />
|
||||||
<Route path="/Interface" component={Interface} />
|
<Route path="/Interface" component={requireAuthentication(Interface)} />
|
||||||
<Route path="/user" component={User} />
|
<Route path="/user" component={requireAuthentication(User)} />
|
||||||
<Route path="/News" component={News} />
|
<Route path="/News" component={requireAuthentication(News)} />
|
||||||
<Route path="/AddInterface" component={ AddInterface } />
|
<Route path="/AddInterface" component={ requireAuthentication(AddInterface) } />
|
||||||
</div>
|
</div>
|
||||||
</HashRouter>
|
</HashRouter>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
return r
|
return r
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
this.props.checkLoginState();
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return this.route(this.props.loginState)
|
return this.route(this.props.loginState);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default connect(
|
|
||||||
state => {
|
|
||||||
return{
|
|
||||||
loginState:state.login.loginState
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
checkLoginState
|
|
||||||
}
|
|
||||||
)(App)
|
|
||||||
|
55
client/components/AuthenticatedComponent.js
Normal file
55
client/components/AuthenticatedComponent.js
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
import PropTypes from 'prop-types'
|
||||||
|
import { changeMenuItem } from '../actions/menu'
|
||||||
|
|
||||||
|
|
||||||
|
export function requireAuthentication(Component) {
|
||||||
|
class AuthenticatedComponent extends React.Component {
|
||||||
|
constructor(props){
|
||||||
|
super(props);
|
||||||
|
}
|
||||||
|
static propTypes ={
|
||||||
|
isAuthenticated : PropTypes.bool,
|
||||||
|
location: PropTypes.object,
|
||||||
|
dispatch: PropTypes.func,
|
||||||
|
history: PropTypes.object,
|
||||||
|
changeMenuItem:PropTypes.func
|
||||||
|
}
|
||||||
|
componentWillMount() {
|
||||||
|
this.checkAuth();
|
||||||
|
}
|
||||||
|
componentWillReceiveProps() {
|
||||||
|
this.checkAuth();
|
||||||
|
}
|
||||||
|
checkAuth() {
|
||||||
|
if( !this.props.isAuthenticated ){
|
||||||
|
this.props.history.push('/');
|
||||||
|
this.props.changeMenuItem('/');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{this.props.isAuthenticated
|
||||||
|
? <Component {...this.props}/>
|
||||||
|
: null
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return connect(
|
||||||
|
(state) => {
|
||||||
|
return{
|
||||||
|
isAuthenticated: state.login.isLogin
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
changeMenuItem
|
||||||
|
}
|
||||||
|
)(AuthenticatedComponent);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -85,16 +85,9 @@ class HeaderCom extends Component {
|
|||||||
}
|
}
|
||||||
linkTo = (e) =>{
|
linkTo = (e) =>{
|
||||||
this.props.changeMenuItem(e.key);
|
this.props.changeMenuItem(e.key);
|
||||||
// this.props.curKey = e.key;
|
|
||||||
// this.setState({
|
|
||||||
// current : e.key
|
|
||||||
// })
|
|
||||||
}
|
}
|
||||||
relieveLink = () => {
|
relieveLink = () => {
|
||||||
this.props.changeMenuItem("");
|
this.props.changeMenuItem("");
|
||||||
// this.setState({
|
|
||||||
// current : ""
|
|
||||||
// })
|
|
||||||
}
|
}
|
||||||
logout = (e) => {
|
logout = (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
@ -129,9 +122,10 @@ class HeaderCom extends Component {
|
|||||||
}
|
}
|
||||||
render () {
|
render () {
|
||||||
const { login, user, msg, uid, curKey } = this.props;
|
const { login, user, msg, uid, curKey } = this.props;
|
||||||
|
console.log(curKey);
|
||||||
return (
|
return (
|
||||||
<acticle className="header-box">
|
<acticle className="header-box">
|
||||||
<Layout className="'layout">
|
<Layout className="layout">
|
||||||
<Header>
|
<Header>
|
||||||
<div className="content">
|
<div className="content">
|
||||||
<div className="logo">
|
<div className="logo">
|
||||||
|
@ -3,7 +3,7 @@ import {
|
|||||||
} from '../../constants/action-types.js'
|
} from '../../constants/action-types.js'
|
||||||
|
|
||||||
const initialState = {
|
const initialState = {
|
||||||
curKey: window.location.hash.split("#")[1]
|
curKey: window.location.hash.split("#")[1] || '/'
|
||||||
}
|
}
|
||||||
|
|
||||||
export default (state = initialState, action) => {
|
export default (state = initialState, action) => {
|
||||||
|
Loading…
Reference in New Issue
Block a user