From 286927663ab4fb06b4dcf26a880ac60259691025 Mon Sep 17 00:00:00 2001 From: Alexander Polynomdivision Date: Wed, 19 Sep 2018 18:18:32 +0200 Subject: [PATCH] feat: Set the session token in Application --- src/components/Drawer.tsx | 7 ++++--- src/components/app.tsx | 20 ++++++++++++++++---- src/containers/Application.ts | 4 +++- src/pages/login.tsx | 2 -- src/security/Token.ts | 7 +++++++ 5 files changed, 30 insertions(+), 10 deletions(-) create mode 100644 src/security/Token.ts diff --git a/src/components/Drawer.tsx b/src/components/Drawer.tsx index 7a32dde..394d275 100644 --- a/src/components/Drawer.tsx +++ b/src/components/Drawer.tsx @@ -22,6 +22,8 @@ import BookIcon from "@material-ui/icons/Book"; import ViewWeekIcon from "@material-ui/icons/ViewWeek"; interface IProps { + logout: () => void; + open: boolean; showButton: boolean; authenticated: boolean; @@ -121,9 +123,8 @@ export default class Drawer extends React.Component { { - // Remove the auth token from the SessionStorage - // window.sessionStorage.removeItem("authKey"); - // TODO: Perform logout + this.closeDrawer(); + this.props.logout(); }}> Abmelden diff --git a/src/components/app.tsx b/src/components/app.tsx index b2406f9..f2729ca 100644 --- a/src/components/app.tsx +++ b/src/components/app.tsx @@ -3,6 +3,7 @@ import * as React from "react"; import { BrowserRouter, Route, Redirect } from "react-router-dom"; import AuthRoute from "../security/AuthRoute"; +import { setSessionToken, removeSessionToken } from "../security/Token"; import Dashboard from "../pages/dashboard"; import LoginPage from "../containers/LoginPage"; @@ -23,6 +24,8 @@ import { IReviewMetadata, ReviewType } from "../models/review"; import { IUser } from "../models/user"; interface IProps { + authenticated: boolean; + setAuthenticated: (status: boolean) => void; setUser: (user: IUser) => void; }; @@ -209,8 +212,9 @@ export default class Application extends React.Component { .then(resp => { if (resp.error === "0") { // Successful login - // TODO: Set the auth token here this.props.setUser(resp.data); + setSessionToken(window, resp.data.sessionToken); + res(resp.data); } else { rej({}); @@ -219,18 +223,26 @@ export default class Application extends React.Component { }); } + logout = () => { + // TODO: Tell the server that we're logging ourselves out + removeSessionToken(window); + this.props.setAuthenticated(false); + } + // Checks whether the user is logged in isAuthenticated = () => { // TODO: Security? // TODO: Implement - return true; + return this.props.authenticated; } render() { + // TODO: Show a spinner before mounting the routes, so that we can + // check if were authenticated before doing any requests return - < div className="flex" > - +
+
} /> { diff --git a/src/containers/Application.ts b/src/containers/Application.ts index cac2253..27e60b7 100644 --- a/src/containers/Application.ts +++ b/src/containers/Application.ts @@ -7,7 +7,9 @@ import Application from "../components/app"; import { setAuthenticated, setUser } from "../actions"; const mapStateToProps = state => { - return {}; + return { + authenticated: state.authenticated, + }; }; const mapDispatchToProps = dispatch => { return { diff --git a/src/pages/login.tsx b/src/pages/login.tsx index 603ba04..91a6bfd 100644 --- a/src/pages/login.tsx +++ b/src/pages/login.tsx @@ -35,8 +35,6 @@ const LoginPageWithRouter = withRouter( const username = this.usernameRef.value || ""; const password = this.passwordRef.value || ""; this.props.login(username, password).then((res: IUser) => { - // Set the session key - window.sessionStorage.setItem("sessionToken", res.sessionToken); this.props.history.push("/dashboard"); }, (err) => { this.props.setLoading(false); diff --git a/src/security/Token.ts b/src/security/Token.ts new file mode 100644 index 0000000..a6560eb --- /dev/null +++ b/src/security/Token.ts @@ -0,0 +1,7 @@ +export function setSessionToken(window: Window, token: string) { + window.sessionStorage.setItem("sessionToken", token); +}; + +export function removeSessionToken(window: Window) { + window.sessionStorage.removeItem("sessionToken"); +}