Как создать безопасную авторизацию пользователя в MERN? - PullRequest
Новая
       8

Как создать безопасную авторизацию пользователя в MERN?

0 голосов
/ 27 мая 2020

Я создаю веб-приложение для социальной сети / платформы со стеком MERN

Но я не знаю, как мне создать безопасную авторизацию пользователя (я решил аутентификацию)

До сих пор я сохранял идентификатор пользователя непосредственно в локальном хранилище, тот же идентификатор, который отображается на странице /user/:id, когда вы видите профиль пользователя, и я знаю, что это очень небезопасно, но позволяет мне, чтобы получить текущий идентификатор пользователя, вошедшего в систему, для выполнения запросов к серверу

Получен идентификатор пользователя, вышел из системы и вошел в систему с этой авторизацией. js файл: 

import LS from "./tools/localstorage"

class Auth {       

    constructor(){
        if (JSON.parse(LS.obtain("user")) == null) {
            this.user = ""
        } else {
            this.user = JSON.parse(LS.obtener("user")).user 
        }
    }

    login(cb, user){
        this.user = user
        LS.save("user", {user : this.user})

        cb();
    }

    logout(cb) {
        this.user = ""
        LS.save("user", { this.user: ""});
            cb();
    }
    isAuthenticated(){
        return this.user?true:false
    }
    isUser(){
        return this.user 
    }
}

export default new Auth()

И следуя этому видеоуроку (https://www.youtube.com/watch?v=Y0-qdp-XBJg), я создал компонент <ProtectedRoute/>, который перед каждым компонентом, которому требуется авторизация, проверяет, является ли LocalStorage как идентификатор пользователя 

import React from 'react'
import {Route, Redirect} from 'react-router-dom'
import auth from "../auth"

export const ProtectedRoute = ({component: Component, ...rest}) => {
    return (
        <Route {...rest} render={
            (props)=>{
                if (auth.isAuthenticated()){
                    console.log("Autenticado")
                    return <Component {...props}/>
            }else{
                console.log(auth.isAuthenticated())
                return (<Redirect to={
                    {
                        pathname: "/login",
                        state: {
                            from: props.location
                        }
                    }
                }/>)
            }
        } 
    }/>
    )
}

Есть ли какая-либо форма, в которой я мог бы узнать текущий идентификатор пользователя и вошел ли он в систему или нет? Даже если страница была закрыта, а затем открыта повторно, или что пользователь мог go на некоторые страницы и видеть свою информацию, даже если нет rnet

Во время разработки я использую клиент -Серверная сеть, но при развертывании я изменю ее на Peer to Peer

...