登录功能开发

api/index.tsx

@@ -8,11 +8,6 @@ export interface RegionResp {
   name: string;
   pid: number;
 }
-
-export interface UserInfoParams {
-  userAccountId: number;
-}
-
 export interface UserInfoResp {
   id: number;
   accountType: number;
@@ -28,6 +23,17 @@ export interface UserInfoResp {
   remark: string;
   portType: number;
   createTime: string;
+  companyAuthStatus: number;
+  token: string;
+}
+
+export interface TestAppletLoginResp {
+  userAccountId: number;
+  token: string;
+  uid: string;
+  phoneNum?: string;
+  nickName: string;
+  sessionKey?: any;
 }
 
 export default {
@@ -35,12 +41,41 @@ export default {
   region: (): Promise<Response<Array<RegionResp>>> => {
     return request("/pms/webDevice/getSecondDistrictInfo");
   },
+  //测试-小程序unionId登录-注册
+  testAppletLogin: (): Promise<Response<TestAppletLoginResp>> => {
+    let params = new URLSearchParams();
+    params.append("unionId", "oQZEd5hy0Qrwaj10BGtP8xq8vH--s88888");
+    return request(
+      "/userapp/auth/testAppletLogin",
+      "post",
+      {},
+      {
+        headers: {
+          "Content-Type": "application/x-www-form-urlencoded",
+        },
+        body: params,
+      }
+    );
+  },
+  //生成小程序码
+  getAppletQRCode: (params: { randomLoginCode: string }) => {
+    return request("/userapp/wx/getAppletQRCode", "get", {
+      page: "page-identity/identity-empower/index",
+      scene: "randomLoginCode=" + params.randomLoginCode,
+    });
+  },
+  //查询登录信息
+  getLoginInfo: (params: { randomLoginCode: string }) => {
+    return request("/userapp/temp-auth/getLoginInfo", "get", params, {
+      hideError: true   //隐藏错误提示
+    });
+  },
   //获取用户基本信息
-  userInfo: (params: UserInfoParams): Promise<Response<UserInfoResp>> => {
-    return request("/userapp/user-account/info", "get", params, {});
+  userInfo: (): Promise<Response<UserInfoResp>> => {
+    return request("/userapp/user-account/info", "get");
   },
   //图片上传地址
   imgOss: () => {
     return config.baseUrl + "/pms/upload/imgOss";
-  }
+  },
 };

api/request.ts

@@ -8,8 +8,14 @@ import config from './config';
  * @param options 额外参数
  * @returns Promise<Response>
  */
-export default function request(url: string, method: String = 'get', data?: any, options = {}): Promise<Response<any>> {
-
+export default function request(url: string, method: String = 'get', data?: any, options: any & { hideError?: boolean, headers?: { token?: string } } = {}): Promise<Response<any>> {
+  let token = localStorage.getItem('token') || '';
+  options = {
+    headers: {
+      token
+    },
+    ...options,
+  }
   switch (method.toLowerCase()) {
     case 'get':
       let params = new URLSearchParams();
@@ -24,16 +30,22 @@ export default function request(url: string, method: String = 'get', data?: any,
 
     case 'post':
       options = {
-        ...options,
         method: 'POST',
         headers: {
           'Content-Type': 'application/json'
         },
-        body: JSON.stringify(data)
+        body: JSON.stringify(data),
+        ...options,
       }
       break;
   }
 
+  function errMsg(msg: string) {
+    if (!options.hideError) {
+      errMsg(msg);
+    }
+  }
+
   return fetch(config.baseUrl + url, options)
     .then((r) => {
       try {
@@ -50,12 +62,12 @@ export default function request(url: string, method: String = 'get', data?: any,
     .then((data) => {
       if (data.errors) {
         //全局消息提示
-        window.messageApi.error('请求出错')
+        errMsg('请求出错')
 
         if (Array.isArray(data.errors)) {
           data.errors.forEach((item: any) => {
-            if (item.defaultMessage){
-              window.messageApi.error(item.defaultMessage)
+            if (item.defaultMessage) {
+              errMsg(item.defaultMessage)
             }
           })
         }
@@ -66,6 +78,11 @@ export default function request(url: string, method: String = 'get', data?: any,
           result: null
         }
       }
+
+      if (data.code !== '200') {
+        errMsg(data.message || '请求出错');
+      }
+
       return data;
     })
     .catch(error => {

components/NavHeader/index.tsx

-import React, { useEffect, useState } from "react";
-import { Avatar, Button, Space, Tabs } from "antd";
+import React, { useContext, useEffect, useState } from "react";
+import { Avatar, Button, Dropdown, Space, Tabs } from "antd";
 import type { TabsProps } from "antd";
 import styles from "./index.module.scss";
 import { useRouter } from "next/router";
@@ -7,6 +7,7 @@ import LoginModal from "~/components/loginModal";
 import { useUser } from "~/lib/hooks";
 import PublishModal from "./publishModal";
 import JoinModal from "./joinModal";
+import { UserContext } from "~/lib/userProvider";
 
 const items: TabsProps["items"] = [
   {
@@ -42,30 +43,55 @@ const items: TabsProps["items"] = [
 export default function NavHeader() {
   const router = useRouter();
   const [currentPath, setCurrentPath] = useState("");
-  const user = useUser();
+  const { userInfo, testLogin, logout } = useContext(UserContext);
 
   useEffect(() => {
     setCurrentPath(router.route);
     console.log("currentHash", currentPath);
   }, [router.route]);
 
+  //导航更改
   const onChange = (key: string) => {
     router.push(key);
   };
 
-  const [openLoginModal, setPpenLoginModal] = useState(false); //登录modal
-  const [openPublishModal, setOpenPublishModal] = useState(false); //发布modal
-
-  const showModal = () => {
-    setPpenLoginModal(true);
-  };
-
-  const handleCancel = () => {
-    setPpenLoginModal(false);
+  //退出登录
+  const onLogout = () => {
+    logout();
   };
 
+  const [openLoginModal, setOpenLoginModal] = useState(false); //登录modal
+  const [openPublishModal, setOpenPublishModal] = useState(false); //发布modal
   const [openJoinModal, setOpenJoinModal] = useState(false); //加盟modal
 
+  //发布按钮事件
+  function onPublish() {
+    //登录判断
+    if (!userInfo) {
+      setOpenLoginModal(true);
+    } else {
+      if (userInfo.companyAuthStatus) {
+        setOpenPublishModal(true);
+      } else {
+        router.push("/certification");
+      }
+    }
+  }
+
+  //加盟按钮事件
+  function onJoin() {
+    //登录判断
+    if (!userInfo) {
+      setOpenLoginModal(true);
+    } else {
+      if (userInfo.companyAuthStatus) {
+        setOpenJoinModal(true);
+      } else {
+        router.push("/certification");
+      }
+    }
+  }
+
   return (
     <div className={styles.navHeader}>
       <div className={styles.nav}>
@@ -77,39 +103,43 @@ export default function NavHeader() {
           onChange={onChange}
         />
         <Space size={16} className={styles.btns}>
-          <Button
-            type="primary"
-            className={styles.btn1}
-            onClick={() => setOpenPublishModal(true)}
-          >
+          <Button type="primary" className={styles.btn1} onClick={onPublish}>
             + 发布需求
           </Button>
-          <Button
-            className={styles.btn2}
-            onClick={() => setOpenJoinModal(true)}
-          >
+          <Button className={styles.btn2} onClick={onJoin}>
             加盟入驻
           </Button>
         </Space>
-        {user ? (
+        {userInfo ? (
           <div className={styles.haedImg}>
-            <Avatar
-              size={36}
-              style={{ background: "#bdbdbd" }}
-              src={user.userImg}
-            ></Avatar>
+            <Dropdown
+              menu={{
+                items: [
+                  { key: "1", label: <div onClick={onLogout}>退出登录</div> },
+                ],
+              }}
+            >
+              <Avatar
+                size={36}
+                style={{ background: "#bdbdbd" }}
+                src={userInfo.userImg}
+              ></Avatar>
+            </Dropdown>
           </div>
         ) : (
           <Button
             type="text"
-            onClick={showModal}
+            onClick={() => testLogin()}
             style={{ fontWeight: "bold", fontSize: 16 }}
           >
             登录
           </Button>
         )}
       </div>
-      <LoginModal open={openLoginModal} onCancel={handleCancel}></LoginModal>
+      <LoginModal
+        open={openLoginModal}
+        onCancel={() => setOpenLoginModal(false)}
+      ></LoginModal>
       <PublishModal
         open={openPublishModal}
         onCancel={() => {

components/loginModal/index.tsx

-import React, { useEffect, useState } from "react";
-import { AutoComplete, Modal } from "antd";
-import Image from "next/image";
+import React, { useContext, useEffect, useState } from "react";
+import { Modal, Image } from "antd";
 import api from "~/api";
+import { UserContext } from "~/lib/userProvider";
 
 type Props = {
   open: boolean;
@@ -9,9 +9,13 @@ type Props = {
 };
 
 export default function LoginModal(props: Props) {
+  const [qrCode, setQrCode] = useState("");
+  const [randomLoginCode, setRandomLoginCode] = useState("");
+  const { setUserInfo } = useContext(UserContext);
+  const [timeHandle, setTimeHandle] = useState<NodeJS.Timer | null>(null);
   useEffect(() => {
-    if (props.open) {
-      var obj = new window.WxLogin({
+    /* if (props.open) {
+      new window.WxLogin({
         self_redirect: true,
         id: "login_container",
         appid: "wx18b7883acd204278",
@@ -21,11 +25,50 @@ export default function LoginModal(props: Props) {
         style: "",
         href: "",
       });
-
-      window.setUserId(1);
+    } */
+    if (!props.open) {
+      return;
     }
+
+    setRandomLoginCode(String(Date.now()));
+    api
+      .getAppletQRCode({
+        randomLoginCode,
+      })
+      .then((res) => {
+        if (res.code == "200") {
+          setQrCode("data:image/png;base64," + res.result || "");
+        }
+      });
   }, [props.open]);
 
+  useEffect(() => {
+    if (randomLoginCode) {
+      if (timeHandle) {
+        clearTimeout(timeHandle);
+      }
+      const handle = setInterval(() => {
+        api
+          .getLoginInfo({
+            randomLoginCode: randomLoginCode,
+          })
+          .then((res) => {
+            if (res.code === "200") {
+              setUserInfo({
+                ...res.result,
+                id: res.result?.userAccountId,
+              });
+              window.messageApi.success("登录成功");
+              clearInterval(handle);
+              setTimeHandle(null);
+              props.onCancel();
+            }
+          });
+      }, 1000);
+      setTimeHandle(handle);
+    }
+  }, [randomLoginCode]);
+
   return (
     <>
       <Modal
@@ -47,13 +90,12 @@ export default function LoginModal(props: Props) {
         >
           欢迎来到云享飞
         </div>
-        <div
-          id="login_container"
-          style={{ margin: "auto", display: "table" }}
-        ></div>
+        <div id="login_container" style={{ margin: "auto", display: "table" }}>
+          <Image src={qrCode} width={150} height={150}></Image>
+        </div>
         <div
           style={{
-            marginTop: -120,
+            // marginTop: -120,
             marginBottom: 52,
             fontSize: 14,
             fontFamily: "MicrosoftYaHei",

lib/hooks.ts

@@ -19,6 +19,11 @@ export function useUser() {
       window.localStorage.setItem('userId', id);
     };
 
+    //退出登录
+    window.logout = () => {
+      window.setUserId('');
+    }
+
     try {
       let userInfo = JSON.parse(window.localStorage.getItem('userInfo') || '') || null;
       setUser(userInfo);
@@ -26,16 +31,25 @@ export function useUser() {
   }, [])
 
   useEffect(() => {
-    if (!user && userAccountId) {
+    if (!user) {
       api
-        .userInfo({
-          userAccountId: userAccountId,
-        })
+        .userInfo()
         .then((res) => {
-          setUser(res.result || null);
+          if(res.code == '200'){
+            setUser(res.result || null);
+          }else{
+            setUserAccountId('');
+          }
+          
           window.localStorage.setItem('userInfo', JSON.stringify(res.result || ''));
         });
     }
+
+    //退出登录
+    if(userAccountId === ''){
+      setUser(null);
+      window.localStorage.setItem('userInfo', '');
+    }
   }, [userAccountId]);
 
   return user;

lib/userProvider.tsx

+import React, { createContext, Dispatch, SetStateAction, useEffect, useState } from "react";
+import api, { UserInfoResp } from "~/api";
+
+export const UserContext = createContext<{
+  testLogin: () => void;
+  logout: () => void;
+  userInfo: UserInfoResp | null;
+  setUserInfo: Dispatch<SetStateAction<UserInfoResp | null>>;
+}>({
+  testLogin() {},
+  logout() {},
+  userInfo: null,
+  setUserInfo() {},
+});
+
+type Props = {
+  children: React.ReactNode;
+};
+const UserProvider = ({ children }: Props) => {
+  const [userInfo, setUserInfo] = useState<UserInfoResp | null>(null);
+
+  useEffect(() => {
+    try {
+      setUserInfo(JSON.parse(window.localStorage.getItem("userInfo") || ""));
+    } catch (e) {}
+  }, []);
+
+  useEffect(() => {
+    localStorage.setItem("userInfo", JSON.stringify(userInfo || ""));
+  }, [userInfo]);
+
+  //测试登录
+  function testLogin() {
+    api.testAppletLogin().then((res) => {
+      if (res.code == "200") {
+        window.localStorage.setItem("token", res.result?.token || "");
+        api.userInfo().then((res) => {
+          setUserInfo(res.result || null);
+        });
+      }
+    });
+  }
+
+  //登出
+  function logout() {
+    localStorage.setItem("token", "");
+    setUserInfo(null);
+  }
+
+  return (
+    <UserContext.Provider value={{ userInfo, setUserInfo, testLogin, logout }}>
+      {children}
+    </UserContext.Provider>
+  );
+};
+
+export default UserProvider;

pages/_app.page.tsx

@@ -6,6 +6,7 @@ import { message } from 'antd';
 import { useEffect } from 'react';
 import Head from "next/head";
 import Script from 'next/script';
+import UserProvider, { UserContext } from "~/lib/userProvider";
 
 export default function App({ Component, pageProps }: AppProps) {
   const [messageApi, contextHolder] = message.useMessage();
@@ -24,7 +25,9 @@ export default function App({ Component, pageProps }: AppProps) {
       </Head>
       <Script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></Script>
       {contextHolder}
-      <Component {...pageProps} />
+      <UserProvider>
+        <Component {...pageProps} />
+      </UserProvider>
     </>
   );
 }

typings/type.d.ts

@@ -4,7 +4,6 @@ declare global {
   interface Window {
     messageApi: MessageInstance;    //全局消息提示api
     WxLogin: any;       //微信登录对象
-    setUserId: (number) => void;    //获取用户信息需要的userId
     _AMapSecurityConfig: { securityJsCode: string };  //高德地图api密钥配置
   }
 }