Merge pull request #115 from andy89923/fix/frontend-token

backend/WebUI/api_webui.go

@@ -594,9 +594,11 @@ func CheckAuth(c *gin.Context) bool {
 // Tenant ID
 func GetTenantId(c *gin.Context) (string, error) {
 	tokenStr := c.GetHeader("Token")
+	if tokenStr == "" {
+		return "", fmt.Errorf("No token in header")
+	}
 	claims, err := ParseJWT(tokenStr)
 	if err != nil {
-		c.JSON(http.StatusInternalServerError, gin.H{})
 		return "", errors.Wrap(err, "GetTenantId error")
 	}
 	return claims["tenantId"].(string), nil
@@ -1012,8 +1014,8 @@ func GetSubscribers(c *gin.Context) {
 	userTenantId, err := GetTenantId(c)
 	if err != nil {
 		logger.ProcLog.Errorln(err.Error())
-		c.JSON(http.StatusBadRequest, gin.H{
-			"cause": "Illegal Token",
+		c.JSON(http.StatusUnauthorized, gin.H{
+			"cause": "Illegal Token (Relogin required)!",
 		})
 		return
 	}
@@ -1249,8 +1251,8 @@ func PostSubscriberByID(c *gin.Context) {
 	claims, err := ParseJWT(tokenStr)
 	if err != nil {
 		logger.ProcLog.Errorln(err.Error())
-		c.JSON(http.StatusBadRequest, gin.H{
-			"cause": "Illegal Token",
+		c.JSON(http.StatusUnauthorized, gin.H{
+			"cause": "Illegal Token (Relogin required)!",
 		})
 		return
 	}
@@ -1778,7 +1780,7 @@ func GetRegisteredUEContext(c *gin.Context) {
 
 	supi, supiExists := c.Params.Get("supi")
 	// TODO: support fetching data from multiple AMFs
-	if amfUris := webuiSelf.GetOamUris(models.NfType_AMF); amfUris != nil {
+	if amfUris := webuiSelf.GetOamUris(models.NfType_AMF); len(amfUris) > 0 {
 		var requestUri string
 
 		if supiExists {
@@ -1823,8 +1825,8 @@ func GetRegisteredUEContext(c *gin.Context) {
 		tenantId, err := GetTenantId(c)
 		if err != nil {
 			logger.ProcLog.Errorln(err.Error())
-			c.JSON(http.StatusBadRequest, gin.H{
-				"cause": "Illegal Token",
+			c.JSON(http.StatusUnauthorized, gin.H{
+				"cause": "Illegal or Nil token",
 			})
 			return
 		}
@@ -1835,7 +1837,8 @@ func GetRegisteredUEContext(c *gin.Context) {
 			sendResponseToClientFilterTenant(c, resp, tenantId)
 		}
 	} else {
-		c.JSON(http.StatusInternalServerError, gin.H{
+		logger.ProcLog.Warningln("No AMF found!")
+		c.JSON(http.StatusNotFound, gin.H{
 			"cause": "No AMF Found",
 		})
 	}
@@ -1899,7 +1902,9 @@ func ChangePasswordInfo(c *gin.Context) {
 	tenantId, err := GetTenantId(c)
 	if err != nil {
 		logger.ProcLog.Errorln(err.Error())
-		c.JSON(http.StatusBadRequest, gin.H{})
+		c.JSON(http.StatusUnauthorized, gin.H{
+			"cause": "Illegal or Nil token",
+		})
 		return
 	}
 

frontend/src/axios.tsx

@@ -16,20 +16,35 @@ const instance = axios.create({
 
 // attach the token to every request
 instance.interceptors.request.use(
-  config => {
-    const token = localStorage.getItem('token');
+  (config) => {
+    const token = localStorage.getItem("token");
     if (token) {
       // add the token to the header
-      console.log('adding token to axios header');
+      console.log("adding token to axios header");
       config.headers.Token = `${token}`;
     } else {
-      console.warn('no token in local storage!');
+      console.warn("no token in local storage!");
     }
     return config;
   },
-  error => {
+  (error) => {
     return Promise.reject(error);
-  }
+  },
+);
+
+// Handle Unauthorized Error(401)
+instance.interceptors.response.use(
+  (response) => {
+    return response;
+  },
+  (error) => {
+    if (error.response && error.response.status === 401) {
+      console.warn("Unauthorized error, clearing token");
+      localStorage.removeItem("token");
+      window.location.href = "/"; // Redirect to index page
+    }
+    return Promise.reject(error);
+  },
 );
 
 export default instance;

frontend/src/pages/Login.tsx

@@ -7,7 +7,6 @@ import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import Container from "@mui/material/Container";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
-import logo from "../free5gc_logo.png";
 import axios from "../axios";
 import { useNavigate } from "react-router-dom";
 import { LoginContext } from "../LoginContext";
@@ -53,7 +52,7 @@ export default function SignIn() {
             alignItems: "center",
           }}
         >
-          <img src={logo} className="App-logo" alt="logo" />
+          <img src="/free5gc_logo.png" className="App-logo" alt="logo" />
           <br />
           <Typography component="h1" variant="h6" color="red">
             {error}