commit

actions/auth.js

@@ -0,0 +1,52 @@
+import axios from "axios";
+import axiosJWT from "../config/axios";
+import qs from "qs";
+
+export const login = async (username, password) => {
+	try {
+		const data = qs.stringify({
+			username,
+			password,
+		});
+
+		const response = await axios.post("http://localhost:5000/login", data, {
+			headers: {
+				"Content-Type": "application/x-www-form-urlencoded",
+			},
+			withCredentials: true,
+		});
+
+		return response.data;
+	} catch (error) {
+		if (error.response) return error.response.data;
+	}
+};
+
+export const refreshToken = async () => {
+	try {
+		const response = await axios.get("http://localhost:5000/token", { withCredentials: true });
+		return response.data;
+	} catch (error) {
+		if (error.response) return error.response.data;
+	}
+};
+
+export const getUser = async () => {
+	try {
+		const response = await axiosJWT.get("http://localhost:5000/user");
+		return response.data;
+	} catch (error) {
+		if (error.response) return error.response.data;
+	}
+};
+
+export const logout = async () => {
+	try {
+		const response = await axios.delete("http://localhost:5000/logout", {
+			withCredentials: true,
+		});
+		return response.data;
+	} catch (error) {
+		if (error.response) return error.response.data;
+	}
+};

components/Layout/Header.js

@@ -3,6 +3,7 @@ import Router from "next/router";
 import PropTypes from "prop-types";
 import Link from "next/link";
 import { UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem, ListGroup, ListGroupItem } from "reactstrap";
+import { logout } from "@/actions/auth";
 
 import { connect } from "react-redux";
 import { bindActionCreators } from "redux";
@@ -51,10 +52,12 @@ class Header extends Component {
 		this.props.actions.toggleSetting("asideToggled");
 	};
 
-	handleLogout = (e) => {
+	handleLogout = async (e) => {
 		e.preventDefault();
-		sessionStorage.clear();
-		Router.push({ pathname: "/login" });
+		const cek = await logout();
+		if (cek.success) {
+			Router.push({ pathname: "/login" });
+		}
 	};
 
 	resize() {

components/Layout/Sidebar.js

@@ -10,6 +10,7 @@ import { bindActionCreators } from "redux";
 import * as actions from "../../store/actions/actions";
 
 import SidebarUserBlock from "./SidebarUserBlock";
+import { getUser } from "@/actions/auth";
 
 import Menu from "./Menu.js";
 import MenuPT from "./MenuPT.js";
@@ -143,8 +144,11 @@ class Sidebar extends Component {
 		pathname: this.props.router.pathname,
 	};
 
-	componentDidMount() {
-		this.menu = JSON.parse(sessionStorage.getItem("user")).peran[0].peran.id === 2 ? MenuPT : Menu;
+	async componentDidMount() {
+		// this.menu = JSON.parse(sessionStorage.getItem("user")).peran[0].peran.id === 2 ? MenuPT : Menu;
+		const user = await getUser();
+		// dataUser.data.peran[0].peran.id === 2;
+		this.menu = user.data.peran[0].peran.id === 2 ? MenuPT : Menu;
 		// prepare the flags to handle menu collapsed states
 		this.buildCollapseList();
 

components/Layout/SidebarUserBlock.js

@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { Collapse } from "reactstrap";
+import { getUser } from "@/actions/auth";
 
 import { connect } from "react-redux";
 
@@ -11,9 +12,9 @@ class SidebarUserBlock extends Component {
 		role: "",
 	};
 
-	componentDidMount() {
-		this.setState({ user: JSON.parse(sessionStorage.getItem("user")) });
-		this.setState({ role: JSON.parse(sessionStorage.getItem("user")).peran[0].peran.nama });
+	async componentDidMount() {
+		const user = await getUser();
+		this.setState({ user: user.data, role: user.data.peran[0].peran.nama });
 	}
 
 	componentDidUpdate(oldProps) {

config/axios.js

@@ -0,0 +1,27 @@
+import axios from "axios";
+import { refreshToken } from "@/actions/auth";
+// import jwt_decode from "jwt-decode";
+
+const axiosJWT = axios.create();
+
+axiosJWT.interceptors.request.use(
+	async (config) => {
+		// const response = await refreshToken();
+		// const decoded = jwt_decode(response.access_token);
+		// const expire = decoded.exp;
+		// const currentDate = Date.now();
+		// if (expire * 1000 < currentDate) {
+		const response = await refreshToken();
+		config.headers = {
+			Authorization: `Bearer ${response.access_token}`,
+		};
+		config.withCredentials = true;
+		return config;
+		// }
+	},
+	(error) => {
+		return Promise.reject(error);
+	}
+);
+
+export default axiosJWT;

package-lock.json

@@ -6405,6 +6405,11 @@
         "set-immediate-shim": "~1.0.1"
       }
     },
+    "jwt-decode": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
+      "integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A=="
+    },
     "kind-of": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",

package.json

@@ -59,6 +59,7 @@
 		"jquery.flot.spline": "themicon/jquery.flot.spline",
 		"jquery.flot.tooltip": "krzysu/flot.tooltip",
 		"jszip": "3.6.0",
+		"jwt-decode": "^3.1.2",
 		"loaders.css": "0.1.2",
 		"matchmedia": "0.1.2",
 		"moment": "^2.29.1",

pages/login.js

@@ -1,7 +1,6 @@
 import { connect } from "react-redux";
-import { login } from "@/store/actions/user";
+import { login, getUser } from "@/actions/auth";
 
-import dataUser from "../json/dataUser";
 import React, { Component } from "react";
 import BasePage from "@/components/Layout/BasePage";
 import { Row, Col, Input, Card, CardHeader, CardBody, Button, CardFooter, CustomInput } from "reactstrap";
@@ -43,7 +42,7 @@ class Login extends Component {
 		});
 	};
 
-	onSubmit = (e) => {
+	onSubmit = async (e) => {
 		const form = e.target;
 		const inputs = [...form.elements].filter((i) => ["INPUT", "SELECT"].includes(i.nodeName));
 
@@ -60,17 +59,27 @@ class Login extends Component {
 		e.preventDefault();
 		if (!hasError) {
 			const { username, password } = this.state.formLogin;
-			let user = dataUser.filter((e) => e.username === username && e.password === password);
-			if (user.length) {
-				user = user[0];
-
-				sessionStorage.setItem("user", JSON.stringify(user));
-				if (JSON.parse(sessionStorage.getItem("user")).peran[0].peran.id === 2) {
+			const auth = await login(username, password);
+			if (auth.success) {
+				const dataUser = await getUser();
+				if (dataUser.data.peran[0].peran.id === 2) {
 					Router.push({ pathname: "/app/pt/pemantauan" });
 				} else {
 					Router.push({ pathname: "/app/pemantauan" });
 				}
 			}
+
+			// let user = dataUser.filter((e) => e.username === username && e.password === password);
+			// if (user.length) {
+			// 	user = user[0];
+
+			// 	sessionStorage.setItem("user", JSON.stringify(user));
+			// 	if (JSON.parse(sessionStorage.getItem("user")).peran[0].peran.id === 2) {
+			// 		Router.push({ pathname: "/app/pt/pemantauan" });
+			// 	} else {
+			// 		Router.push({ pathname: "/app/pemantauan" });
+			// 	}
+			// }
 			// this.dispatch(login(username, password));
 		}
 		// e.preventDefault();