React中高阶组件应用-登录鉴权

我们先来看一下高阶组件的应用场景，除了之前更换网站主题颜色(Context共享)的例子， 还有一个常用的场景就是实现实现登录鉴权。我们来看代码：

import React,{PureComponent} from "react";
import Cart from './pages/Cart'

export class App extends PureComponent{
    constructor(){
        super()
        
        this.state = {
            isLogin:false
        }
    }
    
    loginClick(){
        localStorage.setItem("token","coderwhy")
        
        // this.setState({isLogin:true})
        this.forceUpdate()
    }
    
    render(){
        return (
            <div>
                App
                <button onClick={e=>this.loginClick()}>登录</button>
                <Cart></Cart>
            </div>
        )
    }
}

export default App

上面的代码中，我们通过localStorage.setItem("token","coderwhy")来模拟登录操作。现在我们希望在用户没有登录的情况下，点击购物车按钮时，能够跳转到登录页面。然后我们看一下Cart.jsx组件的代码：

Cart组件

我们先看代码：

import React,{PureComponent} from "react";
import loginAuth from '../hoc/login_auth'

export class Cart extends PureComponent{
    render(){
        return (
            <h2>Cart Page</h2>
        )
    }
}

export default loginAuth(Cart)

上面的代码中，我们通过import loginAuth from '../hoc/login_auth'来引入loginAuth高阶组件。然后我们通过export default loginAuth(Cart)来导出loginAuth高阶组件。

login_auth高阶组件

我们先看代码：

function loginAuth(OriginComponent){
    return props => {
        // 从localStorage中获取token
        const token = localStorage.getItem("token")
        
        if(token){
            return <OriginComponent {...props} />
        } else {
            return <h2>请先登录,再进行跳转到对应的页面中</h2> 
        }
    }
}

export default loginAuth

上面的代码中，我们通过const token = localStorage.getItem("token")来获取本地存储的token。如果存在token，则说明用户已经登录了，我们就渲染原来的组件；如果不存在token，就返回一个提示信息给用户。这样我们就实现了登录鉴权。最后我们看一下最终浏览器的渲染结果：

感谢大家观看，我们下次见！