fix: 添加登录

config/routes.ts

@@ -19,6 +19,12 @@
     ],
   },
   {
+    path: '/login',
+    name: 'login',
+    component: './Login',
+    layout: false,
+  },
+  {
     path: '/',
     component: '../layouts',
     routes: [

src/app.tsx

@@ -1,6 +1,11 @@
 import { PageLoading } from '@ant-design/pro-layout';
 import { history, useModel } from 'umi';
-import { checkToken, reFreshCheckToken } from '@/services/sagacare_service/environment';
+import { message } from 'antd';
+import {
+  checkToken,
+  reFreshCheckToken,
+  getUsersInfo,
+} from '@/services/sagacare_service/environment';
 import { projectObj } from '@/config/api.js';
 import UserStorage from '@/config/sagacare/sagacare_user';
 const loginPath = '/noAuth';
@@ -17,11 +22,53 @@ export async function getInitialState(): Promise<{
   // settings?: Partial<LayoutSettings>;
   currentUser?: API.CurrentUser;
   fetchUser?: () => Promise<API.CurrentUser | undefined>;
+  projectObj?: any;
   //loading?: boolean;
   //fetchUserInfo?: () => Promise<API.CurrentUser | undefined>;
 }> {
   const { location } = history;
-
+  let currentUser = {};
+  //debugger;
+  const checkUser = async () => {
+    //获取用户信息 查看权限
+    var userres = await getUsersInfo();
+    if (userres.result === 'success') {
+      var roles = userres.roles || [];
+      if (
+        roles.find((item: any) => {
+          return item.name == '上格云行政端';
+        })
+      ) {
+        //当用户名 密码正确，并且有权限时才跳转
+        currentUser = {
+          name: userres.username,
+          phone: '',
+          id: userres.userId,
+        };
+        var userObj = UserStorage.getInstance();
+        userObj.setUser(currentUser);
+      } else {
+        message.error('您没有行政端权限');
+        history.push('/login');
+        return {};
+      }
+    } else {
+      history.push('/login');
+    }
+  };
+  if (location.pathname !== '/login') {
+    //console.log("localStorage.getItem('token')", localStorage.getItem('token'));
+    if (!localStorage.getItem('token')) {
+      //如何token不存在 则跳到登录页面
+      history.push('/login');
+      return {};
+    } else {
+      //如果存在token
+      await checkUser();
+    }
+  } else {
+    return {};
+  }
   let access_token: any = location.query.access_token;
   let refresh_token: any = location.query.refresh_token;
 
@@ -33,7 +80,7 @@ export async function getInitialState(): Promise<{
   if (refresh_token) {
     localStorage.setItem('refresh_token', refresh_token);
   }
-  console.log('getInitialState');
+
   //如果没有  取缓存
   //   if (!refresh_token) {
   //     refresh_token = localStorage.getItem('refresh_token');
@@ -62,65 +109,11 @@ export async function getInitialState(): Promise<{
       return undefined;
     }
   };
-
-  let currentUser = {};
-  //projectId = 'Pj1101080259';
-  if (projectObj.projectId == 'Pj3301100002') {
-    //之江项目 验证token
-    currentUser = await fetchUser();
-  } else {
-    //非之江项目
-    let tempUser = {
-      name: '行政测试',
-      phone: '17611228068',
-      id: '9a1ecfbacb6b4f249bf2dd3ec7793ead',
-    };
-
-    var userObj = UserStorage.getInstance();
-    userObj.setUser(tempUser);
-  }
-
-  const reFreshUser = async () => {
-    refresh_token = localStorage.getItem('refresh_token');
-    //刷新token 续约token
-    const res = await reFreshCheckToken({
-      zjfreshtoken: refresh_token,
-    });
-    if (res.refresh_token) {
-      console.log('refresh_token', res.refresh_token);
-      localStorage.setItem('refresh_token', res.refresh_token);
-      localStorage.setItem('access_token', res.access_token);
-    } else {
-      //如果刷新token失败
-      //history.push(loginPath);
-    }
-    //1分钟后再执行
-    setTimeout(() => {
-      // reFreshUser();
-    }, 60000);
-  };
-
-  //await reFreshUser();
-
-  // || {
-  //   companyId: '245e7060643811eb934c0237aedb39a6',
-  //   createDate: 1642388952000,
-  //   depName: '[["研发算法组","上格云","博锐尚格科技股份有限公司"]]',
-  //   firstUseTime: '2020-10-16 18:37:05',
-  //   id: '2d2440710d4548f3afa55c4e8244538e',
-  //   job: '研发工程师',
-  //   manageUserType: 1,
-  //   name: '赵小静',
-  //   phone: '18801040736',
-  //   projectId: 'Pj1101080259',
-  //   status: 2,
-  //   type: 1,
-  //   updateDate: 1642388952000,
-  // };
-
+  //debugger;
   return {
     currentUser,
     fetchUser,
+    projectObj,
   };
 }
 
@@ -132,6 +125,11 @@ export const request = {
         options: {
           ...options,
           interceptors: true,
+          headers: {
+            token: localStorage.getItem('token'),
+            'sso-token': localStorage.getItem('token'),
+            'X-Forwarded-Token': localStorage.getItem('token'),
+          },
         },
       };
     },

src/layouts/index.jsx

@@ -1,10 +1,10 @@
 import React, { useState, useEffect } from 'react';
-import { useModel, useLocation, useIntl } from 'umi';
+import { useModel, useLocation, useIntl, history } from 'umi';
 import styles from './index.less';
 import { MenuFoldOutlined, SmileOutlined } from '@ant-design/icons';
 import Icon from '@/tenants-ui/SgIcon';
 
-import { Drawer, notification } from 'antd';
+import { Drawer, notification, Dropdown, Menu } from 'antd';
 import NavMenu from '@/sagacare_components/navMenu';
 
 export default (props) => {
@@ -104,13 +104,33 @@ export default (props) => {
     //debugger;
     console.log('location', location);
   }, [location]);
+
   return (
     <div className={styles.layout}>
       <div className={styles.header}>
         <div className={styles.title}>之江项目</div>
         <div className={styles.right}>
           <div className={styles.picture}>
-            <Icon type="person" style={{ fontSize: 28 }}></Icon>
+            <Dropdown
+              trigger="click"
+              overlay={
+                <Menu
+                  style={{ width: 80 }}
+                  onClick={({ key }) => {
+                    if (key === 'logout') {
+                      localStorage.removeItem('token');
+                      history.replace('/login');
+                    }
+                  }}
+                >
+                  <Menu.Item key="logout">退出登录</Menu.Item>
+                </Menu>
+              }
+            >
+              <span className={styles.actionItem}>
+                <Icon type="person" style={{ fontSize: 28 }}></Icon>
+              </span>
+            </Dropdown>
           </div>
           <div
             className={styles.notify}

src/layouts/index.less

@@ -42,6 +42,7 @@
       width: 40px;
       height: 40px;
       margin-right: 24px;
+      cursor: pointer;
       //   background-color: #4f4f4f;
       //   border-radius: 40px;
     }

src/pages/Login/index.less

@@ -0,0 +1,101 @@
+.homeContent {
+  position: absolute;
+  top: 45%;
+  left: 50%;
+  // min-width: 640px;
+  display: flex;
+  width: 75%;
+  height: 232px;
+  transform: translate(-50%, -50%);
+  .loginButton {
+    color: #fff;
+    background-color: #ce9f27;
+  }
+  .home-left {
+    position: relative;
+    flex: 1;
+    height: 100%;
+    text-align: center;
+    .box {
+      position: absolute;
+      top: 10px;
+      right: 138px;
+      width: 160px;
+    }
+    img {
+      width: 160px;
+      height: 160px;
+    }
+    .logo-text {
+      padding-top: 17px;
+      color: #af810c;
+      font-weight: 700;
+      font-size: 24px;
+      font-family: 'Persagy';
+      font-style: normal;
+      line-height: 29px;
+      text-align: center;
+      text-transform: capitalize;
+    }
+  }
+  .home-right {
+    position: relative;
+    flex: 1;
+    height: 100%;
+    border-left: 1px solid #d9d9d9;
+    .box {
+      position: absolute;
+      top: 10px;
+      left: 80px;
+      width: 308px;
+    }
+    .qrcode-main {
+      position: relative;
+      width: 164px;
+      height: 160px;
+      margin: 0 auto;
+      padding: 15px;
+      background: #ffffff;
+      border: 1px solid #ce9f27;
+      .qrcode {
+        width: 100% !important;
+        height: 100% !important;
+      }
+    }
+    .qrcode-model {
+      position: absolute;
+      top: 0;
+      left: 50%;
+      width: 164px;
+      height: 160px;
+      background: rgba(0, 0, 0, 0.3);
+      transform: translateX(-50%);
+      span {
+        display: block;
+        color: #4d5262;
+        font-size: 12px;
+        line-height: 160px;
+        text-align: center;
+      }
+      .code-replay {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        color: #fff;
+        font-size: 32px;
+        transform: translate(-50%, -50%);
+      }
+    }
+    .qrcode-text {
+      padding-top: 25px;
+      color: #af810c;
+      font-weight: 400;
+      font-size: 14px;
+      font-family: 'Noto Sans SC';
+      font-style: normal;
+      line-height: 20px;
+      // margin-left: 13%;
+      text-align: center;
+    }
+  }
+}

src/pages/Login/index.tsx

@@ -0,0 +1,155 @@
+import React, { useState, useEffect } from 'react';
+import { Button, Form, Input } from 'antd';
+import { history, useModel } from 'umi';
+import { login } from '@/services/sagacare_service/equipment';
+import { getUsersInfo } from '@/services/sagacare_service/environment';
+import './index.less';
+import UserStorage from '@/config/sagacare/sagacare_user';
+
+const Login: React.FC = () => {
+  const { refresh } = useModel('@@initialState');
+
+  const onFinish = (values: any) => {
+    console.log('Success:', values);
+    onSubmit(values);
+  };
+  const onFinishFailed = (errorInfo) => {
+    console.log('Failed:', errorInfo);
+  };
+
+  const onSubmit = (values: any) => {
+    let params: any = values;
+    login(params)
+      .then((loginres) => {
+        let resData: any = loginres || {};
+        if (resData.result === 'success') {
+          localStorage.setItem('token', resData.token);
+          history.push('/equipment');
+          refresh(); //这个方法会调用 getInitialState方法，getInitialState方法获取用户信息
+          // getUsersInfo()
+          //   .then((userres) => {
+          //     if (userres.result === 'success') {
+          //       var roles = userres.roles || [];
+          //       if (
+          //         roles.find((item: any) => {
+          //           return item.name == '上格云行政端';
+          //         })
+          //       ) {
+          //         let currentUser = {};
+          //         currentUser = {
+          //           name: userres.username,
+          //           phone: '',
+          //           id: userres.userId,
+          //         };
+          //         var userObj = UserStorage.getInstance();
+          //         userObj.setUser(currentUser);
+          //         //只有当用户名 密码正确，并且有权限时才跳转
+          //         history.push('/equipment');
+          //       } else {
+          //         localStorage.removeItem('token');
+          //       }
+          //     } else {
+          //       localStorage.removeItem('token');
+          //     }
+          //   })
+          //   .catch(() => {
+          //     localStorage.removeItem('token');
+          //   });
+        } else {
+          localStorage.removeItem('token');
+        }
+      })
+      .catch(() => {});
+  };
+  return (
+    <div className="homeContent">
+      <div className="home-left">
+        <div className="box">
+          <img alt="" src={require('@/assets/images/sagalogo.svg')} />
+          <div className="logo-text">SagaCare</div>
+        </div>
+      </div>
+      <div className="home-right">
+        <div className="box">
+          <Form
+            name="basic"
+            labelCol={{
+              span: 8,
+            }}
+            wrapperCol={{
+              span: 64,
+            }}
+            style={{
+              maxWidth: 600,
+            }}
+            initialValues={{
+              remember: true,
+              username: '',
+              password: '',
+            }}
+            onFinish={onFinish}
+            onFinishFailed={onFinishFailed}
+            autoComplete="off"
+          >
+            <Form.Item
+              label="用户名"
+              name="username"
+              rules={[
+                {
+                  required: true,
+                  message: 'Please input your username!',
+                },
+              ]}
+            >
+              <Input />
+            </Form.Item>
+            <Form.Item
+              label="密码"
+              name="password"
+              rules={[
+                {
+                  required: true,
+                  message: 'Please input your password!',
+                },
+              ]}
+            >
+              <Input.Password />
+            </Form.Item>
+            <Form.Item
+              wrapperCol={{
+                offset: 8,
+                span: 16,
+              }}
+            >
+              <Button type="primary" htmlType="submit" className="loginButton">
+                提交
+              </Button>
+            </Form.Item>
+          </Form>
+
+          {/* <van-form @submit="onSubmit" class="box-form">
+        <van-cell-group inset>
+          <van-field
+            v-model="username"
+            name="username"
+            placeholder="用户名"
+            :rules="[{ required: true, message: '请填写用户名' }]"
+          />
+          <van-field
+            v-model="password"
+            type="password"
+            name="password"
+            placeholder="密码"
+            :rules="[{ required: true, message: '请填写密码' }]"
+          />
+        </van-cell-group>
+        <div>
+          <van-button round block native-type="submit"> 提交 </van-button>
+        </div>
+      </van-form> */}
+        </div>
+      </div>
+    </div>
+  );
+};
+export default Login;

src/sagacare_components/topNavigator/index.tsx

@@ -5,7 +5,7 @@ import { Select } from 'antd';
 
 import type { navigatorItem } from '@/pages/Environment/index';
 import { getBuildingList, getFloorList } from '@/services/sagacare_service/environment';
-import { projectObj } from '@/config/api.js';
+// import { projectObj } from '@/config/api.js';
 import { useModel } from 'umi';
 import UserStorage from '@/config/sagacare/sagacare_user';
 
@@ -46,6 +46,7 @@ const TopNavigator: React.FC<topNavigatorProps> = ({
   const [currentBuild, setCurrentBuild] = useState<string>();
   const [floorList, setFloorList] = useState<floorItem[]>([]);
   const [currentFloor, setCurrentFloor] = useState<string>();
+  const { initialState } = useModel('@@initialState');
 
   //则监听searchBuildId的改变    如果buildingId改变 请求楼层列表
   useEffect(() => {
@@ -121,11 +122,11 @@ const TopNavigator: React.FC<topNavigatorProps> = ({
   useEffect(() => {
     var userObj = UserStorage.getInstance();
     const user = userObj.getUser();
-    console.log('TopNavigator----getBuildingList', user, projectObj.projectId);
+    //console.log('TopNavigator----getBuildingList', user, projectObj.projectId);
     if (buildList.length == 0) {
       getBuildingList({
         criteria: {
-          projectId: projectObj.projectId,
+          projectId: initialState?.projectObj?.projectId,
         },
         orders: [
           {
@@ -155,7 +156,7 @@ const TopNavigator: React.FC<topNavigatorProps> = ({
         //changeBuildId && changeBuildId(lastBuildId || (resData[0] || {}).id);
       });
     }
-  }, []);
+  }, [initialState]);
 
   //请求楼层列表的接口
   useEffect(() => {

src/services/sagacare_service/environment.ts

@@ -223,3 +223,15 @@ export const getUserInfo = (uid: string) => {
     method: 'get',
   });
 };
+
+/**
+ *
+ * @param data 获取用户信息
+ * @returns
+ */
+export const getUsersInfo = () => {
+  return request(`/sgadmin/mngserver/userInfo`, {
+    from: 'sagacare',
+    method: 'GET',
+  });
+};

src/services/sagacare_service/equipment.js

@@ -247,3 +247,18 @@ export const changeManualTempHttp = (params) => {
     },
   });
 };
+
+/**
+ *
+ * @param data 登录
+ * @returns
+ */
+export const login = (params) => {
+  return request(`/sgadmin/server/login`, {
+    method: 'POST',
+    data: params,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+};