React路由深入實戰用戶登錄

williamwen1986 發布于2019-08-26 10:15 / 940人閱讀

摘要：本篇基于路由來實戰用戶登錄功能，會涉及到表單的數據綁定表單提交和登錄判斷等新玩意。

本篇基于React路由來實戰用戶登錄功能，會涉及到表單的數據綁定、表單提交和登錄判斷等新玩意。

續上篇：React的路由深入

先來創建一個組件 - 登錄表單組件

// file：src/components/UserLogin.js

"use strict";

import React from "react";

export default class UserLogin extends React.Component {
    construct(props) {
        super(props);
        this.state = {
            username: "",
            password: ""
        };
    }
    
    render() {
        return 
            用戶登錄
            
                用戶名：
                
            
            
                密碼：
                
            
            
                
            
        
    }
}

綁定表單元素到state，并且綁定點擊事件到按鈕

// file：src/components/UserLogin.js

"use strict";

import React from "react";

export default class UserLogin extends React.Component {
    construct(props) {
        super(props);
        this.state = {
            username: "",
            password: ""
        };
    }
    
    setUserInfo(event, key) {
        // input表單元素會自動綁定一個event對象對事件函數
        // event對象target屬性等于input DOM元素對象，所以event.target.value 可以獲取到當前input的value值
        let obj = {};
        obj[key] = event.target.value;
        // 更新狀態
        this.setState(obj);
    }
    
    render() {
        return 
            用戶登錄
            
                用戶名：
                 {
                    this.setUserInfo(event, "username");
                }}>
            
            
                密碼：
                 {
                    this.setUserInfo(event, "password");
                }}>
            
            
                
            
        
    }
}

input表單元素會自動綁定一個event對象對事件函數

event對象target屬性等于input DOM元素對象，所以event.target.value 可以獲取到當前input的value值

定義一個用戶登錄操作類

本篇不涉及后臺接口，暫時用固定用戶名和密碼模擬登錄

// file：src/core/Passport.js

"use strict";

export default class Passport {
    constructor() {
        // 用戶登錄標識
        this.isLogin = false;
    }
    
    login(username, password, callback) {
        if (username === "mi360" && password === "123") {
            // 登錄成功
            this.isLogin = true;
            // 將登錄成功之后的操作給調用者處理
            callback();
        } else {
            // 登錄失敗
            // 這里簡單彈出一個消息
            alert("登錄失敗！");
        }
    }
}

在登錄表單中調用登錄操作類

// file：src/components/UserLogin.js

"use strict";

import React from "react";

// 導入登錄操作類
import Passport from "../core/Passport";

export default class UserLogin extends React.Component {
    construct(props) {
        super(props);
        this.state = {
            username: "",
            password: ""
        };
    }
    
    setUserInfo(event, key) {
        // input表單元素會自動綁定一個event對象對事件函數
        // event對象target屬性等于input DOM元素對象，所以event.target.value 可以獲取到當前input的value值
        let obj = {};
        obj[key] = event.target.value;
        // 更新狀態
        this.setState(obj);
    }
    
    render() {
        return 
            用戶登錄
            
                用戶名：
                 {
                    this.setUserInfo(event, "username");
                }}>
            
            
                密碼：
                 {
                    this.setUserInfo(event, "password");
                }}>
            
            
                
            
        
    }
}

在我們的路由組件中加上登錄組件的路由

// file：src/components/MyRouter.js

"use strict";

import React from "react";
import News from "../components/News";
import Shop from "../components/Shop";
import Detail from "../components/Detail";

// 用戶登錄組件
import Login from "../components/UserLogin";

import {
    HashRouter as Router,
    Route,
    Redirect,
    Link
} from "react-router-dom";

export default class MyRouter extends React.Component {

    render() {
        return 
            
                
                    首頁
                    商品
                    新聞
                    用戶登錄
                

                

                
                
                
                
                
            
        
    }
}

訪問頁面，預覽效果：

輸入中正確的用戶名和密碼會跳到新聞頁面！

添加登錄判斷

給新聞頁面加上登錄判斷，如果沒有登錄，自動跳轉到登錄頁面

import React from "react";
import News from "../components/News";
import Shop from "../components/Shop";
import Detail from "../components/Detail";
import Login from "../components/UserLogin";

import {
    HashRouter as Router,
    Route,
    Redirect,
    Link
} from "react-router-dom";

// 導入用戶登錄操作類，并實例化
import Passport from "../core/Passport";
let passport = new Passport();

export default class MyRouter extends React.Component {

    render() {
        return 
            
                
                    首頁
                    商品
                    新聞
                    用戶登錄
                

                

                
                
                
                // 使用render屬性定義處理函數路由跳轉判斷
                 {
                    if (passport.islogin) {
                        return 
                    } else {
                        return 
                    }
                }} />
                     // 將用戶操作類實例傳遞給用戶登錄組件
                 {
                    return 
                }} />
            
        
    }
}

修改用戶登錄組件使用路由傳遞過來的用戶登錄操作類

"use strict";

import React from "react";
import Passport from "../core/Passport";

export default class UserLogin extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            username: "",
            password: ""
        }
    }

    setUserInfo(event, key) {
        let obj = {};
        obj[key] = event.target.value;
        this.setState(obj);
    }

    render() {
        return 
            用戶登錄
            
                用戶名：
                 {
                    this.setUserInfo(event, "username");
                }} />
            
            
                密碼：
                 {
                    this.setUserInfo(event, "password")
                }} />
            
            
                
            
        
    }
}

再次預覽訪問效果，并且測試新聞未登錄下是否能夠訪問，登錄后能否訪問！

原文鏈接：https://www.mi360.cn/articles...

GPU云服務器云服務器 mongodb管理與開發實戰詳解深入云計算 mongodb管理與開發實戰詳解-深入云計算用戶登錄用戶注冊用戶登錄

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

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

React實戰篇（React仿今日頭條）

摘要：前言上次初學用寫了個后臺管理，這次便尋思寫個移動端的項目。便有了這次的這個項目。然后通過來判斷如何動畫具體處理異步用來書寫跟配置還有一些零零散散的知識點，就不介紹了，具體可以到上查看。個人博客在線觀看地址前言上次初學用 react 寫了個后臺管理，這次便尋思寫個移動端的項目。便有了這次的這個項目。這個項目以前寫了個 vue 的版本。有興趣的可以點擊進入模擬數據用的是 Eas...

NicolasHe 2019-08-22 16:07 評論0 收藏0
angular4實戰（2） router

摘要：在上一章節，通過新建項目之后，會自動引入路由模塊，接下來需要做的事情就是對路由模塊進行配置。為了方便維護，單獨把路由模塊的配置拿出來，再去輸出到中。路由守衛業務需求是在沒有登錄的情況下，是不允許跳入到下一個頁面的。 router 單頁面應用通過路由來去渲染不同的視圖，為用戶在同一個頁面看到不同的場景，提供基礎服務。在上一章節，通過新建項目之后，ngModule會自動引入路由模塊，接下...

wanglu1209 2019-08-21 16:43 評論0 收藏0
React+ Redux + React-route + Axios 實戰,很適合進階

摘要：前言前段時間學習完了的基礎自己網上找了一些實戰項目做了幾個感覺項目不是很全面就想做一個完整的項目來提升自己的水平以前學習的時候就看過大神的項目所以自己打算用重寫它后端數據還是用實在沒有精力擼后端感謝大神該項目是餓了么目前開發了登錄注冊購前言前段時間學習完了React的基礎,自己網上找了一些實戰項目,做了幾個感覺項目不是很全面,就想做一個完整的項目來提升自己的React水平.以前學習...

phpmatt 2019-08-23 14:57 評論0 收藏0
基于 Webpack 4 多入口生成模板用于服務端渲染的方案及實戰

摘要：原作者原鏈接基于多入口生成模板用于服務端渲染的方案及實戰法律聲明警告本作品遵循署名非商業性使用禁止演繹未本地化版本協議發布。這是什么背景現代化的前端項目中很多都使用了客戶端渲染的單頁面應用。原作者：@LinuxerPHL原鏈接：基于 Webpack 4 多入口生成模板用于服務端渲染的方案及實戰法律聲明警告：本作品遵循署名-非商業性使用-禁止演繹3.0 未本地化版本（CC BY-...

big_cat 2019-08-26 10:37 評論0 收藏0
基于 Webpack 4 多入口生成模板用于服務端渲染的方案及實戰

摘要：原作者原博文地址基于多入口生成模板用于服務端渲染的方案及實戰法律聲明警告本作品遵循署名非商業性使用禁止演繹未本地化版本協議發布。這是什么背景現代化的前端項目中很多都使用了客戶端渲染的單頁面應用。原作者：@LinuxerPHL原博文地址: 基于 Webpack 4 多入口生成模板用于服務端渲染的方案及實戰法律聲明警告：本作品遵循署名-非商業性使用-禁止演繹3.0 未本地化版本（...

Lavender 2019-08-26 10:37 評論0 收藏0