react腳手架項目，根據 localstorage 判斷用戶是否登錄

XBaron 發布于2019-08-26 10:13 / 2972人閱讀

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

本地存儲 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;

云服務器 GPU云服務器 php是否登錄判斷用戶是否登錄 php中判斷是否登錄用戶是否已登錄

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105788.html

一個基于React整套技術棧+Node.js的前端頁面制作工具

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

ermaoL 2019-08-26 11:46 評論0 收藏0
Vue全家桶商城全站升級之引入HTTPS,PWA,錯誤監控,持續構建。

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

zengdongbao 2019-08-23 10:22 評論0 收藏0
react + koa2實現的論壇

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

jk_v1 2019-08-21 17:04 評論0 收藏0
前端20個靈魂拷問徹底搞明白你就是中級前端工程師【下篇】

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

fireflow 2019-08-30 15:44 評論0 收藏0
最好用的koa2+mysql的RESTful API腳手架，mvc架構，支持node調試，pm2部署

摘要：基于構建的服務器腳手架這是一個基于的輕量級腳手架，支持支持使用編寫。腳手架可以根據不同的環境配置不同的信息運行價值，支持開發，測試，生產環境的不同參數配置。 #基于webpack構建的 Koa2 restful API 服務器腳手架這是一個基于 Koa2 的輕量級 RESTful API Server 腳手架，支持 ES6, 支持使用TypeScript編寫。 GIT地址：https...

xiongzenghui 2019-08-26 14:05 評論0 收藏0