Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Protect unauthenticated access on frontend
  • Loading branch information
mrEvgenX committed May 30, 2020
1 parent 1670a22 commit 2eca316
Show file tree
Hide file tree
Showing 5 changed files with 47 additions and 15 deletions.
3 changes: 2 additions & 1 deletion TODO.mk
@@ -1,4 +1,5 @@
- Логин-разлогин
- Наладить регистрацию пользователей
- Защититься от незалогиненных пользователей на стороне бэкенда
- Возможность удалять элементы
- Редактирование зачтенных дней в статистике
- Сделать адекватную верстку
10 changes: 7 additions & 3 deletions react/src/App.js
Expand Up @@ -51,6 +51,7 @@ class App extends Component {
auth: {
refresh: localStorage.getItem('refreshToken'),
access: localStorage.getItem('accessToken'),
isAuthenticated: localStorage.getItem('refreshToken') !== null
},
folders: [],
trackedItems: [],
Expand All @@ -61,7 +62,9 @@ class App extends Component {
authenticate: this.authenticate
};
populateState(this.state.auth.access)
.then(data => { this.setState(data) })
.then(data => {
this.setState(data)
})
.catch(_ => {
this.refreshAccess(this.state.auth.refresh)
.then(data => {
Expand Down Expand Up @@ -91,7 +94,7 @@ class App extends Component {
.then(response => response.json())
.then(data => {
this.setState({
auth: { ...data }
auth: { ...data, isAuthenticated: true }
});
localStorage.setItem('refreshToken', data.refresh);
localStorage.setItem('accessToken', data.access);
Expand Down Expand Up @@ -137,6 +140,7 @@ class App extends Component {
auth: {
refresh: null,
access: null,
isAuthenticated: false
},
folders: [],
trackedItems: [],
Expand Down Expand Up @@ -207,7 +211,7 @@ class App extends Component {
render() {
return (
<div className="App">
<HeaderBlock logout={this.logout} />
<HeaderBlock isAuthenticated={this.state.auth.isAuthenticated} logout={this.logout} />
<Main globalState={this.state} />
</div>
);
Expand Down
14 changes: 11 additions & 3 deletions react/src/components/HeaderBlock.js
Expand Up @@ -3,17 +3,25 @@ import { Link } from 'react-router-dom';


export default function HeaderBlock(props) {
const { logout } = props;
const { isAuthenticated, logout } = props;
const handleClick = (e) => {
e.preventDefault();
logout()
}
if (!isAuthenticated) {
return (
<>
<h1>Easy Track</h1>
<p><Link to='/login'>Вход</Link></p>
<p><Link to='/register'>Регистрация</Link></p>
<hr/>
</>
);
}
return (
<>
<h1>Easy Track</h1>
<p><Link to='/'>Папки</Link></p>
<p><Link to='/login'>Вход</Link></p>
<p><Link to='/register'>Регистрация</Link></p>
<p><a href='/' onClick={handleClick}>Выход</a></p>
<hr/>
</>
Expand Down
5 changes: 5 additions & 0 deletions react/src/components/Login.js
@@ -1,4 +1,5 @@
import React, { Component } from 'react';
import { Redirect } from 'react-router-dom';


export default class Login extends Component {
Expand All @@ -23,9 +24,13 @@ export default class Login extends Component {
e.preventDefault();
const { authenticate } = this.props;
authenticate(this.state.login, this.state.password);
this.setState({login: '', password: ''});
}

render() {
if (this.props.isAuthenticated) {
return <Redirect to="/" />
}
return (
<>
<h2>Вход на сайт</h2>
Expand Down
30 changes: 22 additions & 8 deletions react/src/components/Main.js
@@ -1,23 +1,37 @@
import React from 'react';
import {Switch, Route} from 'react-router-dom';
import {Switch, Route, Redirect} from 'react-router-dom';
import FoldersList from './FoldersList';
import ItemsList from './ItemsList';
import ItemsListStat from './ItemsListStat';
import Login from './Login';
import Register from './Register';

export default function Main(props) {
const { globalState: { folders, trackedItems, trackEntries, createFolder, createElement, addTrackEntry, authenticate } } = props;
const { globalState: { folders, trackedItems, trackEntries, createFolder, createElement, addTrackEntry, authenticate, auth: { isAuthenticated } } } = props;
return (
<Switch>
<Route exact path="/"
render={() => <FoldersList folders={folders} createFolder={createFolder} />} />
<Route exact path="/login" render={() => <Login authenticate={authenticate} />} />
render={() => {
if (!isAuthenticated) {
return <Redirect to="/login" />
}
return <FoldersList folders={folders} createFolder={createFolder} />
}} />
<Route path="/folder/"
render={() => {
if (!isAuthenticated) {
return <Redirect to="/login" />
}
return (<Switch>
<Route path="/folder/:folderSlug/statistics"
render={props => <ItemsListStat {...props} folders={folders} trackedItems={trackedItems} trackEntries={trackEntries} createElement={createElement} />} />
<Route path="/folder/:folderSlug"
render={props => <ItemsList {...props} folders={folders} trackedItems={trackedItems} createElement={createElement} addTrackEntry={addTrackEntry} />} />
</Switch>)
}} />
<Route exact path="/login" render={() => <Login isAuthenticated={isAuthenticated} authenticate={authenticate} />} />
<Route exact path="/register" component={Register} />
<Route path="/folder/:folderSlug/statistics"
render={props => <ItemsListStat {...props} folders={folders} trackedItems={trackedItems} trackEntries={trackEntries} createElement={createElement} />} />
<Route path="/folder/:folderSlug"
render={props => <ItemsList {...props} folders={folders} trackedItems={trackedItems} createElement={createElement} addTrackEntry={addTrackEntry} />} />
<Route render={() => <h1>Такой страницы нет</h1>} />
</Switch>
);
}

0 comments on commit 2eca316

Please sign in to comment.