現在我們要來完善使用者登入：判斷使用者是否登入(同樣是在本地模擬)

我們需要實現：當我們直接訪問『新盤排行』頁 判斷使用者是否登入，如果沒有登入就跳轉去登入頁面。

1、新建一個類，使用者登入許可權類

auth.js：

export  default class Auth{
    constructor(){
        this.isLogin = false; //是否登入
    }

    // 使用者登入函式
    login(user_name,user_pwd,callback){
        if (user_name==="jack" && user_pwd==="123"
 
){
            this.isLogin = true;
            callback(); //登入成功，呼叫回撥函式
        }else {
            alert("登入失敗");
        }
    }
}

在登入介面用到這個類，就是點選『登入』按鈕之後，例項化這個類並呼叫Auth類中的login()方法：

#在login.js裡
#第一步引入
import Auth from "auth";
#點選『登入』按鈕
            <p><input type="submit" onClick={()=>
 
{
                let auth = new Auth();
                auth.login(this.state.user_name,this.state.user_pwd,()=>{
                    this.props.history.push("/news");
                })
            }} value="登入"/></p>

傳遞相關引數給Auth類的login()方法。

2、下面我們做判斷：如果已經登入

來到配置路由的元件router-demo.js：

#先引入相關類
 

import Auth from "auth";
let  auth = new Auth(); //初始化一個全域性的Auth物件

然後我們需要在配置news元件路由的地方動刀子了：

<Route exact path="/news" component={News}/>
#這個是news元件的路由
#現在我們的需求是：判斷使用者是否登入，登入就去，為登入就去登入介面

                <Route exact path="/news" render={()=>{
                    if (auth.isLogin){
                        return <News/>
                    }else{
                        return <Redirect to="/login"/>
                    }
                }} />

到這裡我們有必要來看看router-demo.js的全部程式碼了：

import React from 'react';

// 引入路由
import {
    HashRouter as Router,
    Redirect,
    Route,
    Link
} from 'react-router-dom';

//引入元件
import Home from "./home";
import News from "./news"
import About from "./about"
import Help from  "./help"
import Detail from "./detail"
import Login from "./login"
import Auth from "../core/auth";
let  auth = new Auth(); //初始化一個全域性的Auth物件


export default  class RouterDemo extends React.Component{
    render(){
        return <Router>
            <div>
                <ul>
                    <li><Link to="/">Home</Link></li>
                    <li><Link to="/news">新聞</Link></li>
                    <li><Link to="/about">About</Link></li>
                    <li><Link to="/help">Help</Link></li>
                    <li><Link to="/login">使用者登入</Link></li>
                </ul>

                <hr/>

                <Route exact path="/" component={Home}/>
                <Route exact path="/news" render={()=>{
                    if (auth.isLogin){
                        return <News/>
                    }else{
                        return <Redirect to="/login"/>
                    }
                }} />

                <Route  path="/news/:newsid" component={Detail}/>
                <Route  path="/about" component={About}/>
                <Route  path="/help" component={Help}/>
                <Route  path="/login" component={Login}/>
            </div>
        </Router>
    }
}

上面就已經實現了『訪問news元件，沒有登入 就去登入頁面』。

3、有個問題：點選『登入』不跳去 新聞頁了

這是為什麼呢？
回憶一下我們在登入頁login.js裡是用的Auth來判斷的使用者是否已經登入。
在router-demo.js我們又例項化了一個Auth物件。2個不同的物件，當然判斷就失效了。
我們需要在配置路由的地方，把這個物件傳遞到Login元件中。

                <Route  path="/login" render={()=>{
                    return <Login auth={auth} />
                }} />

我在router-demo.js裡把auth物件作為一個屬性傳遞給了Login元件。
那麼我們在login.js裡就可以獲取這個屬性了(auth物件就可以是同一個了)，
在login.js中：

            <p><input type="submit" onClick={()=>{
                let auth = this.props.auth==null ? new new Auth() : this.props.auth;
                auth.login(this.state.user_name,this.state.user_pwd,()=>{
                    this.props.history.push("/news");
                })
            }} value="登入"/></p>

我們可以獲取傳遞過來的Auth類物件。

只把驗證使用者是否登入的auth物件傳遞國慶還不行，我們現在使用的是render來載入元件了而非component。
所以凡是這種方式載入的元件，在該元件裡很多以前我們常用的方法就不能用了。
比如：this.props.xxxxx。

所以我們還要做如下修改：

                <Route  path="/login" render={(props)=>{
                    return <Login auth={auth} {...props} />
                }} />

我們傳遞了props給Login元件，{...props}這是物件解構的方式(ES2015語法)。

同理News也需要(雖然這裡不寫也不會錯，那是因為我們的news元件裡沒有用到this.props)

                <Route exact path="/news" render={(props)=>{
                    if (auth.isLogin){
                        return <News {...props} />
                    }else{
                        return <Redirect to="/login" />
                    }
                }} />

到這裡router-demo.js全部程式碼：

import React from 'react';

// 引入路由
import {
    HashRouter as Router,
    Redirect,
    Route,
    Link
} from 'react-router-dom';

//引入元件
import Home from "./home";
import News from "./news"
import About from "./about"
import Help from  "./help"
import Detail from "./detail"
import Login from "./login"
import Auth from "../core/auth";
let  auth = new Auth(); //初始化一個全域性的Auth物件


export default  class RouterDemo extends React.Component{
    render(){
        return <Router>
            <div>
                <ul>
                    <li><Link to="/">Home</Link></li>
                    <li><Link to="/news">新聞</Link></li>
                    <li><Link to="/about">About</Link></li>
                    <li><Link to="/help">Help</Link></li>
                    <li><Link to="/login">使用者登入</Link></li>
                </ul>

                <hr/>

                <Route exact path="/" component={Home}/>
                <Route exact path="/news" render={(props)=>{
                    if (auth.isLogin){
                        return <News {...props} />
                    }else{
                        return <Redirect to="/login" />
                    }
                }} />

                <Route  path="/news/:newsid" component={Detail}/>
                <Route  path="/about" component={About}/>
                <Route  path="/help" component={Help}/>
                <Route  path="/login" render={(props)=>{
                    return <Login auth={auth} {...props} />
                }} />
            </div>
        </Router>
    }
}

login.js全部程式碼：

import React from 'react';
import Auth from "../core/auth";

export default  class Login extends React.Component{
    // 構造
      constructor(props) {
        super(props);
        // 初始狀態
        this.state = {
            user_name:"",
            user_pwd:""
        };
      }

    render(){
        return <div>
            <h2>使用者登入</h2>
            <p>
                <span>使用者名稱：</span>
                <input type="text" onChange={(e)=>{
                    this.setUserInfo(e,"user_name")
                }}/>
            </p>
            <p>
                <span>密  碼：</span>
                <input type="password" onChange={(e)=>{
                    this.setUserInfo(e,"user_pwd")
                }}/>
            </p>
            <p><input type="submit" onClick={()=>{
                let auth = this.props.auth==null ? new new Auth() : this.props.auth;
                auth.login(this.state.user_name,this.state.user_pwd,()=>{
                    this.props.history.push("/news");
                })
            }} value="登入"/></p>
        </div>
    }

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

        this.setState(obj);
    }
}