react的登录逻辑

最新推荐文章于 2024-09-24 18:18:00 发布

weixin_30632899

最新推荐文章于 2024-09-24 18:18:00 发布

阅读量237

点赞数

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/dianzan/p/11320081.html

版权

https://blog.csdn.net/qq_36822018/article/details/83028661（先看看这个

https://blog.csdn.net/weixin_34268169/article/details/88834074（再先看看这个

https://www.jianshu.com/p/a735096f3eda（注册登录

方法1

class Container extends Component {
  render() {
    console.log("一直执行的根")
    return (
      <Switch>
        {
          router.map((router, index) => {

            // const login = document.cookie.includes('login=true')
            // sessionStorage.setItem('login', 1)
            // sessionStorage.clear();
            const login = sessionStorage.getItem("login");
            if (login) { // 如果登录了, 返回正确的路由
              return <Route exact key={index} path={router.path}
                render={
                  props => (
                    <router.component {...props} routes={router.routes} />
                  )

                }
              />
            } else { // 没有登录就重定向至登录页面
              // alert("你还没有登录哦, 确认将跳转登录界面进行登录!")
              return <Redirect key={'login'} to={{
                pathname: '/login',
                state: {
                  from: ''
                }
              }} />
            }
          })
        }
      </Switch>
    );
  }

}

export default Container;

https://www.jianshu.com/p/ad7e6ec86ba7

import React from 'react'
import { Route, Redirect } from 'react-router-dom'
// 这个组件将根据登录的情况, 返回一个路由
const PrivateRoute = ({component: Component, ...props}) => {
    // 解构赋值 将 props 里面的 component 赋值给 Component
    return <Route {...props} render={(p) => {
        const login = document.cookie.includes('login=true')
        if (login){ // 如果登录了, 返回正确的路由
            return <Component />
        } else { // 没有登录就重定向至登录页面
            alert("你还没有登录哦, 确认将跳转登录界面进行登录!")
            return <Redirect to={{
                pathname: '/login',
                state: {
                    from: p.location.pathname
                }
            }}/>
        }
    }}/>
}
export default PrivateRoute

方法2 不知道是否有坑

https://cloud.tencent.com/developer/ask/128189

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Login from './components/Login/Login'
import Home from './components/Home/Home'
import store from './store/store'
import {Provider}  from 'react-redux';
import history from './history/history';
import {Router,Route,Switch,Redirect} from 'react-router-dom'
import {connect} from 'react-redux'

class App extends Component {
  render() {
    let storelogginState=store.getState();
    let logginState=storelogginState.loginReducer.loggedIn
    console.log('store',logginState)
    return (
      <Router history={history}>
        <div className="App">
          <Provider store={store}>
            <Switch>
                <Route exact path="/" component={Login}/>
                <Route exact path="/home"  render={()=>(
                  this.props.loginReducer.loggedIn?(<Home/>):(<Redirect to="/"/>)
              )  }/>
            </Switch>
          </Provider>
        </div>
      </Router>

    );
  }
}

方法3

export default () => (
  <Router history={hashHistory}>
    <Route path="/" component={base.app} onEnter={isLogin}>
      <IndexRoute component={base.example} />
      <Route path="/desk$/index" component={base.example} />
      <Route path="/socketReceive" component={base.socketReceive} /></Route>
    <Route path="/login" component={base.login} />
    <Route path="*" component={base.notfound} />
  </Router>
)

// 进入路由的判断
export const isLogin = (nextState, replaceState) => {
  if (nextState.location.query && nextState.location.query.ticket) { // 如果url自带ticket
    sessionStorage.setItem('token', 'ticket')
  }
  if (nextState.location.query && nextState.location.query.key) { // 如果url自带key
    sessionStorage.setItem('token', 'key')
  }
  const token = sessionStorage.getItem('token')
  if (!token) { // 没有token，那就返回首页
    replaceState('/login')
  }
}