feat: 增加登录后回跳来源地址

前端 - 管理后台未登录跳登录页增加携带回跳地址后端 - 登录接口增加二次回跳参数，支持登录后回调原地址
jorben · Jul 10, 2024 · 585211c · 585211c
1 parent 973d788
commit 585211c
Show file tree

Hide file tree

Showing 9 changed files with 66 additions and 19 deletions.
diff --git a/provider/auth/github.go b/provider/auth/github.go
@@ -35,12 +35,11 @@ func NewGithubOAuth(c config.OAuthProvider) *GithubOAuth {
 	return &GithubOAuth{cfg: c}
 }
 
-func (g *GithubOAuth) GetLoginUrl(ctx *gin.Context) (string, error) {
-	cbUrl := fmt.Sprintf("%s&state=%s", g.cfg.CallbackUri, g.cfg.State)
+func (g *GithubOAuth) GetLoginUrl(ctx *gin.Context, redirect string) (string, error) {
 	return fmt.Sprintf(
 		"https://github.com/login/oauth/authorize?client_id=%s&redirect_uri=%s",
 		g.cfg.ClientId,
-		url.QueryEscape(cbUrl),
+		url.QueryEscape(fmt.Sprintf("%s&state=%s&redirect_uri=%s", g.cfg.CallbackUri, g.cfg.State, url.QueryEscape(redirect))),
 	), nil
 }
 

diff --git a/provider/auth/google.go b/provider/auth/google.go
@@ -45,7 +45,8 @@ func NewGoogleOAuth(c config.OAuthProvider) *GoogleOAuth {
 	}
 }
 
-func (g *GoogleOAuth) GetLoginUrl(ctx *gin.Context) (string, error) {
+func (g *GoogleOAuth) GetLoginUrl(ctx *gin.Context, redirect string) (string, error) {
+	// 暂未找到 google auth 携带二次回调的方法，注入callback中会无法匹配
 	return g.googleOAuth2Config.AuthCodeURL(g.cfg.State), nil
 }
 

diff --git a/provider/auth/wechat.go b/provider/auth/wechat.go
@@ -38,12 +38,12 @@ func NewWechatOAuth(c config.OAuthProvider) *WechatOAuth {
 }
 
 // GetLoginUrl 获取登录URL
-func (g *WechatOAuth) GetLoginUrl(ctx *gin.Context) (string, error) {
+func (g *WechatOAuth) GetLoginUrl(ctx *gin.Context, redirect string) (string, error) {
 
 	return fmt.Sprintf(
 		"https://open.weixin.qq.com/connect/qrconnect?appid=%s&scope=snsapi_login&redirect_uri=%s&state=%s",
 		g.cfg.ClientId,
-		url.QueryEscape(g.cfg.CallbackUri),
+		url.QueryEscape(fmt.Sprintf("%s&redirect_uri=%s", g.cfg.CallbackUri, url.QueryEscape(redirect))),
 		g.cfg.State,
 	), nil
 }

diff --git a/router/api/auth.go b/router/api/auth.go
@@ -16,7 +16,7 @@ import (
 
 // AuthProvider 第三方登录渠道接口
 type AuthProvider interface {
-	GetLoginUrl(ctx *gin.Context) (string, error)
+	GetLoginUrl(ctx *gin.Context, redirect string) (string, error)
 	GetUserinfo(ctx *gin.Context) (*model.UserSocialInfo, error)
 }
 
@@ -31,6 +31,12 @@ func AuthLogin(ctx *gin.Context) {
 		providerConfig = config.GetAuthProviderConfig(provider)
 	}
 
+	// 获取登录成功后的回调地址
+	redirect := ctx.Query("redirect_uri")
+	if len(redirect) == 0 {
+		redirect = "/"
+	}
+
 	// 创建provider实例
 	switch provider {
 	case auth.ProviderGithub:
@@ -45,7 +51,7 @@ func AuthLogin(ctx *gin.Context) {
 	}
 
 	// 执行provider登录构造
-	url, err := oAuthClient.GetLoginUrl(ctx)
+	url, err := oAuthClient.GetLoginUrl(ctx, redirect)
 	if err != nil {
 		log.Errorf(ctx, "Get %s login url failed, err: %s", provider, err.Error())
 		c.CJSON(errs.ErrAuthLoginUrl)

diff --git a/web/src/pages/Login.js b/web/src/pages/Login.js
@@ -35,10 +35,26 @@ const Login = () => {
   const location = useLocation();
   const navigate = useNavigate();
   const [wxLoginUrl, setWxLoginUrl] = useState("");
-  const searchParams = new URLSearchParams(location.search);
+  const searchParams = React.useMemo(() => {
+    return new URLSearchParams(location.search);
+  }, [location]);
   const isCallback = searchParams.get("callback");
 
   const [messageApi, contextHolder] = message.useMessage();
+  const getRedirect = React.useCallback(() => {
+    try {
+      const r = searchParams.get("redirect_uri") || "/";
+      // 尝试将输入解析为URL对象
+      const parsedUrl = new URL(r, "http://dummybase");
+      // 获取路径和查询字符串
+      const pathAndQuery = parsedUrl.pathname + parsedUrl.search;
+      // 如果路径和查询字符串是根路径（即"/"），则返回空字符串
+      return pathAndQuery;
+    } catch (e) {
+      // 如果输入不是有效的URL（例如相对路径），直接返回输入
+      return "/";
+    }
+  }, [searchParams]);
 
   useEffect(() => {
     if (isCallback) {
@@ -55,7 +71,7 @@ const Login = () => {
               );
               // 跳转页面
               // TODO: 支持跳转回登录来源页面，并做同源校验
-              navigate("/admin");
+              navigate(getRedirect());
             } else {
               messageApi.error(response.data?.message);
             }
@@ -69,7 +85,10 @@ const Login = () => {
     } else {
       // 登录场景，获取微信地址
       const getWxLoginUrl = async () => {
-        ApiClient.get("/auth/login?type=wechat&url=1")
+        ApiClient.get(
+          "/auth/login?type=wechat&url=1&redirect_uri=" +
+            encodeURIComponent(getRedirect())
+        )
           .then((response) => {
             if (response.data?.code === 0) {
               setWxLoginUrl(response.data?.data);
@@ -84,7 +103,7 @@ const Login = () => {
       };
       getWxLoginUrl();
     }
-  }, [messageApi, isCallback, navigate, location]);
+  }, [messageApi, isCallback, navigate, location, getRedirect]);
 
   return (
     <Layout
@@ -187,15 +206,21 @@ const Login = () => {
                         <span>其他登录方式：</span>
                         <Button
                           shape="round"
-                          href={CONSTANTS.BASEURL_API + "/auth/login?type=qq"}
+                          href={
+                            CONSTANTS.BASEURL_API +
+                            "/auth/login?type=qq&redirect_uri=" +
+                            encodeURIComponent(getRedirect())
+                          }
                           icon={<QqOutlined />}
                         >
                           QQ
                         </Button>
                         <Button
                           shape="round"
                           href={
-                            CONSTANTS.BASEURL_API + "/auth/login?type=google"
+                            CONSTANTS.BASEURL_API +
+                            "/auth/login?type=google&redirect_uri=" +
+                            encodeURIComponent(getRedirect())
                           }
                           icon={<GoogleOutlined />}
                         >
@@ -204,7 +229,9 @@ const Login = () => {
                         <Button
                           shape="round"
                           href={
-                            CONSTANTS.BASEURL_API + "/auth/login?type=github"
+                            CONSTANTS.BASEURL_API +
+                            "/auth/login?type=github&redirect_uri=" +
+                            encodeURIComponent(getRedirect())
                           }
                           icon={<GithubOutlined />}
                         >

diff --git a/web/src/pages/admin/layout/AdminFrame.js b/web/src/pages/admin/layout/AdminFrame.js
@@ -34,7 +34,11 @@ const AdminFrame = () => {
             response.data?.code === CONSTANTS.ERRCODE.ErrAuthUnauthorized
           ) {
             messageApi.error(response.data?.message, () => {
-              navigate("/login");
+              navigate(
+                `/login?redirect_uri=${encodeURIComponent(
+                  window.location.pathname
+                )}`
+              );
             });
           } else {
             messageApi.error(response.data?.message);

diff --git a/web/src/pages/admin/layout/AdminHeader.js b/web/src/pages/admin/layout/AdminHeader.js
@@ -35,7 +35,11 @@ const AdminHeader = ({ collapsed, setCollapsed }) => {
         icon={<LogoutOutlined />}
         onClick={() => {
           localStorage.removeItem(CONSTANTS.STORAGE_KEY_JWT);
-          navigate("/login");
+          navigate(
+            `/login?redirect_uri=${encodeURIComponent(
+              window.location.pathname
+            )}`
+          );
         }}
       >
         退出登录

diff --git a/web/src/pages/admin/user/UserDetail.js b/web/src/pages/admin/user/UserDetail.js
@@ -137,7 +137,9 @@ const UserDetail = ({ user }) => {
             ) {
               messageApi.error(response.data?.message, () => {
                 navigate(
-                  `/login?redirect=${encodeURIComponent(window.location.href)}`
+                  `/login?redirect_uri=${encodeURIComponent(
+                    window.location.pathname
+                  )}`
                 );
               });
             } else {

diff --git a/web/src/pages/admin/user/UserList.js b/web/src/pages/admin/user/UserList.js
@@ -154,7 +154,11 @@ const UserList = () => {
             response.data?.code === CONSTANTS.ERRCODE.ErrAuthUnauthorized
           ) {
             messageApi.error(response.data?.message, () => {
-              navigate("/login");
+              navigate(
+                `/login?redirect_uri=${encodeURIComponent(
+                  window.location.pathname
+                )}`
+              );
             });
           } else {
             messageApi.error(response.data?.message);