成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

react腳手架項(xiàng)目，根據(jù) localstorage 判斷用戶是否登錄

XBaron / 2989人閱讀

摘要：本地存儲(chǔ)判斷用戶是否登錄獲取判斷用戶是否登錄登錄信息是否過期登錄用戶名密碼登錄用戶名或密碼輸入有誤登錄成功

本地存儲(chǔ) localstorage 判斷用戶是否登錄 APP.js 
import React, { Component } from "react";

import { BrowserRouter, Switch, Route, Redirect } from "react-router-dom";

import Login from "./pages/login";

import Home from "./pages/home";


class App extends Component{

  state = {
    userInfo: {}
  };

  componentWillMount() {
    // 獲取localstorage
    let userInfo = localStorage.getItem("userInfo");
    // 判斷用戶是否登錄/登錄信息是否過期
    if(userInfo && Date.now() - JSON.parse(userInfo).date < 2 * 60 * 60 * 1000) {
      this.setState({userInfo: JSON.parse(userInfo)});
    }
  }

  render() {
    const { userInfo } = this.state;
    let { search } = window.location;
    return (
        
          
             
              Object.keys(userInfo).length > 0 
              ?  
              : 
            } />
             (
              Object.keys(userInfo).length > 0 
              ? 
              : 
            )} />
          
        
    );
  }
}

export default App;
login/index.jsx 
import React, {Component} from "react";
import {Input, Icon, message} from "antd";

class Login extends Component {
  constructor(props) {
    super(props);
    this.login = this.login.bind(this);
    this.state = {
      loginInfo: {
        username: "",
        password: ""
      },
      redirect_url: ""
    }
  }

  componentDidMount() {
    const { search } = window.location;
    const redirect_url = search ? decodeURIComponent(search.split("=")[1]) : "/";
    this.setState({redirect_url});
  }

  render() {
    const { loginInfo } = this.state;
    return (
      

        

          

            
登錄

             this.changeInputValue(e.target.value, "username")}
              prefix={}
              style={{marginBottom: 30}}
              placeholder="用戶名"
            />
             this.changeInputValue(e.target.value, "password")}
              prefix={}
              placeholder="密碼"
            />
            
登錄

          

        

      

    )
  }

  changeInputValue(value, name) {
    const { loginInfo } = this.state;
    loginInfo[name] = value;
    this.setState(state => ({loginInfo: {...state.loginInfo, ...loginInfo}}))
  }

  login() {
    const { loginInfo, redirect_url } = this.state;
    if(!loginInfo.username 
      || !loginInfo.password 
      || (loginInfo.username !== "admin"
        && loginInfo.password !== "123456")) return message.error("用戶名或密碼輸入有誤");
    loginInfo.date = new Date().getTime();
    const userInfo = JSON.stringify(loginInfo);
    localStorage.setItem("userInfo", userInfo);
    window.location.href = redirect_url;
    this.setState({loginInfo: {}, redirect_url: ""});
    message.success("登錄成功")
  }
}

export default Login;

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/105788.html

相關(guān)文章

  • 一個(gè)基于React整套技術(shù)棧+Node.js的前端頁面制作工具

    摘要：是一個(gè)前端頁面制作工具，方便產(chǎn)品，運(yùn)營和視覺的同學(xué)迅速開發(fā)簡單的前端頁面，從而可以解放前端同學(xué)的工作量。支持恢復(fù)現(xiàn)場功能關(guān)閉頁面配置不丟失支持操作。提供了一個(gè)方法，用于的拆分。就是發(fā)出的通知，表示應(yīng)該要發(fā)生變化了。 pagemaker是一個(gè)前端頁面制作工具，方便產(chǎn)品，運(yùn)營和視覺的同學(xué)迅速開發(fā)簡單的前端頁面，從而可以解放前端同學(xué)的工作量。此項(xiàng)目創(chuàng)意來自網(wǎng)易樂得內(nèi)部項(xiàng)目nfop中的page...

    ermaoL 評論0 收藏0

  • Vue全家桶商城全站升級之引入HTTPS,PWA,錯(cuò)誤監(jiān)控,持續(xù)構(gòu)建。

    摘要：免費(fèi)升級到升級到后，服務(wù)器可以開啟版本，對比性能和緩存各方面要更好，還有其他新特性，可以啟動(dòng)功能，更好的進(jìn)行離線緩存，更好的離線體驗(yàn)。 showImg(https://segmentfault.com/img/remote/1460000012773891?w=370&h=661); 在線地址:https://fancy.czero.cn 手機(jī)掃描二維碼查看: showImg(http...

    zengdongbao 評論0 收藏0

  • react + koa2實(shí)現(xiàn)的論壇

    摘要：頁面預(yù)覽頁面主要分為話題列表頁消息頁面?zhèn)€人信息頁面創(chuàng)建話題頁面?zhèn)€人設(shè)置頁面注冊頁面登陸頁面頁面。還有權(quán)限方面的，比如登陸后不可以再進(jìn)入登陸頁面，未登陸也不可以進(jìn)入創(chuàng)建主題頁面。沒有使用，但推介使用，不然性能不好。 技術(shù)棧 線上地址：點(diǎn)擊查看 （訪問會(huì)有點(diǎn)慢，至于原因，下面會(huì)說明）前端（主要）：reactv15.6.1、react routerv4.2.0、reduxv3.7.2、ant...

    jk_v1 評論0 收藏0

  • 前端20個(gè)靈魂拷問 徹底搞明白你就是中級前端工程師 【下篇】

    摘要：安裝后已經(jīng)完成了安裝，并且等待其他的線程被關(guān)閉。激活后在這個(gè)狀態(tài)會(huì)處理事件回調(diào)提供了更新緩存策略的機(jī)會(huì)。并可以處理功能性的事件請求后臺同步推送。廢棄狀態(tài)這個(gè)狀態(tài)表示一個(gè)的生命周期結(jié)束。 showImg(https://segmentfault.com/img/bVbwWJu?w=2056&h=1536); 不知不覺，已經(jīng)來到了最后的下篇 其實(shí)我寫的東西你如果認(rèn)真去看，跟著去寫，應(yīng)該能有...

    fireflow 評論0 收藏0

  • 最好用的koa2+mysql的RESTful API腳手架，mvc架構(gòu)，支持node調(diào)試，pm2部署

    摘要：基于構(gòu)建的服務(wù)器腳手架這是一個(gè)基于的輕量級腳手架，支持支持使用編寫。腳手架可以根據(jù)不同的環(huán)境配置不同的信息運(yùn)行價(jià)值，支持開發(fā)，測試，生產(chǎn)環(huán)境的不同參數(shù)配置。 #基于webpack構(gòu)建的 Koa2 restful API 服務(wù)器腳手架 這是一個(gè)基于 Koa2 的輕量級 RESTful API Server 腳手架，支持 ES6, 支持使用TypeScript編寫。 GIT地址：https...

    xiongzenghui 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<