react脚手架项目，根据 localstorage 判断用户是否登录

XBaron 发布于2019-08-26 10:13 / 3042人阅读

摘要：本地存储判断用户是否登录获取判断用户是否登录登录信息是否过期登录用户名密码登录用户名或密码输入有误登录成功

本地存储 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中判断是否登录用户是否已登录

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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