react.js路由(4.x)：模拟一个用户登录2（登录判断、路由的多种加载方式）

前面我们完成了模拟用户登录的功能：获取文本框的值、手动路由跳转
http://blog.csdn.net/github_26672553/article/details/76908308

现在我们要来完善用户登录：判断用户是否登录(同样是在本地模拟)

我们需要实现：当我们直接访问『新盘排行』页 判断用户是否登录，如果没有登录就跳转去登录页面。

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);
    }
}