6

我正在使用 react js 和 node js api 实现一个简单的用户认证系统。这就是我在ComponentWillMount方法中所做的：-

1.检查令牌是否退出（在localStorage中）
2.如果不退出，则状态“令牌”的值将保持空白
3.如果存在，则使用后端请求检查它是否有效。
4.如果令牌有效，则将'token'声明为localstorage.token
5.如果令牌无效，则状态'token'的值将保持空白

在渲染方法中，我添加了基于状态“令牌”的值的条件渲染，即如果状态“令牌”为空白，则将渲染正常页面，否则将重定向到用户页面。

问题是我可以使用任何反应开发工具更改状态“令牌”的值。这导致了使用假令牌登录的漏洞。为避免每次使用诸如componentDidUpdate shouldComponentUpdate之类的生命周期方法之一更改状态“令牌”时，我都必须检查状态“令牌”的有效性。

但正如react shouldComponentUpdate官方文档中提到的，它只是作为性能优化存在的。不要依赖它来“阻止”渲染，因为这可能会导致错误。

使用componentDidUpdate没有用，因为它会在组件由于状态更改而发生更改后被调用。

使用componentWillUpdate在官方文档中被称为 Unsafe

我不确定如何解决这个漏洞。这是组件的代码

import React,{Component} from 'react';
import {
    BrowserRouter as Router,
    Route,
    Link,
    Switch,
    Redirect
} from 'react-router-dom';

import Home from './Home';
import Nav from './Nav';
import Login from './Login';
import Signup from './Signup';

class Out extends Component{
    constructor(){
        super();        

        this.state = {
            token : '',
            isLoading:false            
        }
        this.isLoading = this.isLoading.bind(this);
    }

    logout(){
        alert('logged out');
    }

    componentWillMount(){
        let {match} = this.props;
        this.navNoSessionRouteData = [
            {to:`${match.url}login`,name:'Login',key:'r1'},
            {to:`${match.url}signup`,name:'signup',key:'r2'},
            {to:`${match.url}`,name:'Home',key:'r3'}
        ];

        this.navNoSessionButtonData = [];

        this.setState({
            isLoading:true
        });

        const tokenVar = localStorage.getItem('token');
        if(tokenVar == null){
            console.log('not logged in');
            this.setState({
                isLoading:false
            });
        }else{            
            fetch('http://localhost:3000/api/account/verify?token='+tokenVar)
            .then(res=>res.json())
            .then(json=>{
                if(json.success){
                    console.log('logged in');
                    this.setState({
                        token : tokenVar,
                        isLoading:false
                    });
                }else{
                    this.setState({                 
                        isLoading:false,
                    });
                }
            });
        }
    }

    isLoading(){
        let {isLoading,token} = this.state;
        if(isLoading === true){
            return (
                <p>Loading...</p>
            );
        }
        else{
            let {match} = this.props
            console.log(token);
            return(
                <div>
                    {
                        (token)?<p>Logged In</p>:(<p>NOT logged IN</p>)
                    }
                    <div className = "row">
                        <Nav navRouteData = {this.navNoSessionRouteData}  navButtonData = {this.navNoSessionButtonData}/>
                    </div>
                        <div className="row justify-content-center">
                            <Switch>
                                <Route exact = {true} path={`${match.path}`} component={Home} />
                                <Route path={`${match.path}login`} component={Login}/>
                                <Route path={`${match.path}signup`} component={Signup}/>
                            </Switch>
                        </div>
                </div>
            )
        }
    }


    render(){    
        return(
            <div>
                {this.isLoading()}
            </div>
        )
    }
}

export default Out;

图像显示使用真实令牌登录的用户图像显示带有空白令牌的已注销用户图像显示使用假令牌登录的用户

4

1 回答 1

2

只是在这里循环，我会回答两个问题：

（我认为更接近您的问题）：如果我可以编辑 React 状态变量，我显示的任何内容如何安全？

这里的重点是他们可以导航到要求他们登录的 UI，但是当他们实际去请求数据（到您的后端，或直接到您的数据库，如 Firebase）时，他们将需要一个有效的令牌才能这样做。您的后端应该对此进行检查，并且不会返回任何有价值的数据。

如果我可以读取 React 状态变量，那么我的令牌被盗并被其他人用来请求和写入数据的安全性如何？

为此，请参阅此答案

于 2018-12-07T00:14:48.287 回答