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

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

續(xù)上篇：React的路由深入

先來創(chuàng)建一個組件 - 登錄表單組件

// 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，并且綁定點(diǎn)擊事件到按鈕

// 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對象對事件函數(shù)
        // event對象target屬性等于input DOM元素對象，所以event.target.value 可以獲取到當(dāng)前input的value值
        let obj = {};
        obj[key] = event.target.value;
        // 更新狀態(tài)
        this.setState(obj);
    }
    
    render() {
        return 

            
用戶登錄
            

                用戶名：
                 {
                    this.setUserInfo(event, "username");
                }}>
            
            

                密碼：
                 {
                    this.setUserInfo(event, "password");
                }}>
            
            

                 {
                    // 測試獲取的用戶名+密碼
                    alert(this.state.username + this.state.password);
                }}>登錄
            
        
    }
}

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

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

定義一個用戶登錄操作類

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

// file：src/core/Passport.js

"use strict";

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

在登錄表單中調(diào)用登錄操作類

// file：src/components/UserLogin.js

"use strict";

import React from "react";

// 導(dǎo)入登錄操作類
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對象對事件函數(shù)
        // event對象target屬性等于input DOM元素對象，所以event.target.value 可以獲取到當(dāng)前input的value值
        let obj = {};
        obj[key] = event.target.value;
        // 更新狀態(tài)
        this.setState(obj);
    }
    
    render() {
        return 

            
用戶登錄
            

                用戶名：
                 {
                    this.setUserInfo(event, "username");
                }}>
            
            

                密碼：
                 {
                    this.setUserInfo(event, "password");
                }}>
            
            

                 {
                    // 測試獲取的用戶名+密碼
                    // alert(this.state.username + this.state.password);
                    
                    // 登錄操作
                    const p = new Passport();
                    p.login(this.state.username, this.state.password, () => {
                        // 登錄成功時，跳轉(zhuǎn)頁面
                        this.props.history.push("/news");
                    })
                    
                }}>登錄
            
        
    }
}

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

// 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 
            

                

                    
首頁
                    
商品
                    
新聞
                    
用戶登錄
                

                


                
                
                
                
                
            
        
    }
}

訪問頁面，預(yù)覽效果：

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

添加登錄判斷

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

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";

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

export default class MyRouter extends React.Component {

    render() {
        return 
            

                

                    
首頁
                    
商品
                    
新聞
                    
用戶登錄
                

                


                
                
                
                // 使用render屬性定義處理函數(shù)路由跳轉(zhuǎn)判斷
                 {
                    if (passport.islogin) {
                        return 
                    } else {
                        return 
                    }
                }} />
                     // 將用戶操作類實(shí)例傳遞給用戶登錄組件
                 {
                    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")
                }} />
            
            

                 {
                    let p = this.props.passport == null ? new Passport() : this.props.passport;
                    p.login(this.state.username, this.state.password, () => {
                        // 登錄成功時，跳轉(zhuǎn)頁面
                        this.props.history.push("/news");
                    });
                }}>登錄
            
        
    }
}

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

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