✨ Feat: [web]:增加一个授权token给拓展的页面

front/src/App.jsx

@@ -7,6 +7,7 @@ import ClipboardJS from "clipboard";
 import store from "./redux";
 import NotFound from "./pages/public/notFound/NotFound";
 import UserSpace from "./pages/userSpace";
+import SsoAuth from "./pages/userSpace/SsoAuth";
 
 import Login from "./pages/public/Login";
 import RegisterOrReset from "./pages/public/RegisterOrReset";
@@ -48,10 +49,16 @@ class App extends Component {
 
             {/*个人中心页面*/}
             <Route exact path="/userSpace" component={UserSpace} />
+            {/* 公共授权页面 */}
+            <Route exact path="/userSpace/ssoAuth" component={SsoAuth} />
             {/* 公共页面 */}
             <Route exact path="/public/login" component={Login} />
             <Route exact path="/public/register" component={RegisterOrReset} />
-            <Route exact path="/public/resetPassword" component={RegisterOrReset} />
+            <Route
+              exact
+              path="/public/resetPassword"
+              component={RegisterOrReset}
+            />
             <Route exact path="/public/verifyEmail" component={EmailVerify} />
             <Route exact path="/404" component={NotFound} />
             {/* 当前面的路由都匹配不到时就会重定向到/404 */}

front/src/components/PasswordCheck.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { message, Modal, Input } from "antd";
+import { Modal, Input } from "antd";
 import http from "../util/httpUtil";
 
 export default class PasswordCheck extends React.Component {
@@ -15,7 +15,9 @@ export default class PasswordCheck extends React.Component {
    */
   async submit() {
     console.log(this.state);
-    let actionId = await http.post("/user/checkPassword", { password: this.state.password });
+    let actionId = await http.post("/user/checkPassword", {
+      password: this.state.password
+    });
     this.props.onChange(actionId);
   }
 
@@ -23,8 +25,17 @@ export default class PasswordCheck extends React.Component {
     const { visible, onClose } = this.props;
     const { password } = this.state;
     return (
-      <Modal title="密码校验" visible={visible} onOk={this.submit.bind(this)} onCancel={onClose}>
+      <Modal
-        <Input.Password placeholder="输入旧密码" value={password} onChange={e => this.setState({ password: e.target.value })} />
+        title="密码校验"
+        visible={visible}
+        onOk={this.submit.bind(this)}
+        onCancel={onClose}
+      >
+        <Input.Password
+          placeholder="输入旧密码"
+          value={password}
+          onChange={e => this.setState({ password: e.target.value })}
+        />
       </Modal>
     );
   }

front/src/pages/public/EmailVerify/index.jsx

@@ -1,14 +1,8 @@
 import React from "react";
-import { Link } from "react-router-dom";
 import MainLayout from "../../../layout/MainLayout/index";
 import http from "../../../util/httpUtil";
 import queryString from "query-string";
 
-const style = {
-  "text-align": "center",
-  "padding-top": "200px"
-};
-
 class EmailVerify extends React.Component {
   constructor(props) {
     super(props);

front/src/pages/userSpace/SsoAuth/index.jsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { Spin, message } from "antd";
+import styles from "./index.module.less";
+import MainLayout from "../../../layout/MainLayout";
+
+class SsoAuth extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      message: ""
+    };
+  }
+
+  componentDidMount() {
+    let token = localStorage.getItem("token");
+    if (
+      token == null ||
+      token.length === 0 ||
+      JSON.parse(atob(token.split(".")[1])).exp < Date.now() / 1000
+    ) {
+      return;
+    }
+    let data = {
+      type: "sendToken",
+      data: token
+    };
+    setTimeout(() => {
+      window.postMessage(data, "*");
+      message.info("授权完成，页面将在3s后自动关闭");
+      setTimeout(() => {
+        window.opener = null;
+        window.open("", "_self");
+        window.close();
+      }, 3000);
+    }, 1000);
+  }
+
+  render() {
+    const { message } = this.state;
+    return (
+      <MainLayout>
+        <div style={{ textAlign: "center", paddingTop: "30%" }}>
+          <Spin tip="正在处理中，请稍候..." />
+        </div>
+        <div id="myCustomEventDiv" className={styles.message}>
+          {JSON.stringify(message)}
+        </div>
+      </MainLayout>
+    );
+  }
+}
+
+export default SsoAuth;

front/src/pages/userSpace/SsoAuth/index.module.less

@@ -0,0 +1,6 @@
+@import "../../../global.less";
+
+.message {
+  position: relative;
+  left: 1111111111px;
+}

front/src/pages/userSpace/components/UserInfo/index.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { message, Button, Tooltip, Input, Form } from "antd";
+import { message, Button, Tooltip, Input } from "antd";
 import styles from "./index.module.less";
 import { connect } from "react-redux";
 import * as action from "../../../../redux/action/LoginInfoAction";
@@ -62,7 +62,7 @@ class UserInfo extends React.Component {
    * @param {*} isShowKey 是否修改字段
    */
   async submit(itemKey, isShowKey) {
-    if (this.state[itemKey] == null || this.state[itemKey] == "") {
+    if (this.state[itemKey] == null || this.state[itemKey] === "") {
       message.error("请修改后重试");
       return;
     }
@@ -73,7 +73,11 @@ class UserInfo extends React.Component {
     }
     if ((itemKey === "password" || itemKey === "email") && actionId == null) {
       message.warning("敏感操作，需校验密码");
-      this.setState({ isModelShow: true, currentAction: itemKey, currentShowKey: isShowKey });
+      this.setState({
+        isModelShow: true,
+        currentAction: itemKey,
+        currentShowKey: isShowKey
+      });
       return;
     }
     try {
@@ -96,7 +100,12 @@ class UserInfo extends React.Component {
 
   async actionIdChange(actionId) {
     const { currentAction, currentShowKey } = this.state;
-    this.setState({ actionId, isModelShow: false, currentAction: null, currentShowKey: null });
+    this.setState({
+      actionId,
+      isModelShow: false,
+      currentAction: null,
+      currentShowKey: null
+    });
     this.submit(currentAction, currentShowKey);
   }
 
@@ -107,26 +116,45 @@ class UserInfo extends React.Component {
    */
   renderItem(label, itemKey, isShowKey) {
     let repeatPassword = this.state.repeatPassword;
-    let itemValue = this.state[itemKey] === null ? this.props[itemKey] : this.state[itemKey];
+    let itemValue =
+      this.state[itemKey] === null ? this.props[itemKey] : this.state[itemKey];
     let isShow = this.state[isShowKey];
     let block;
     if (isShow) {
       block = (
         <div>
-          {itemKey == "password" ? (
+          {itemKey === "password" ? (
             <div>
-              <Input.Password value={itemValue} placeholder="新密码" onChange={e => this.setState({ [itemKey]: e.target.value })} />
+              <Input.Password
-              <Input.Password value={repeatPassword} placeholder="重复密码" onChange={e => this.setState({ repeatPassword: e.target.value })} />
+                value={itemValue}
+                placeholder="新密码"
+                onChange={e => this.setState({ [itemKey]: e.target.value })}
+              />
+              <Input.Password
+                value={repeatPassword}
+                placeholder="重复密码"
+                onChange={e =>
+                  this.setState({ repeatPassword: e.target.value })
+                }
+              />
             </div>
           ) : (
-            <Input value={itemValue} onChange={e => this.setState({ [itemKey]: e.target.value })} />
+            <Input
+              value={itemValue}
+              onChange={e => this.setState({ [itemKey]: e.target.value })}
+            />
           )}
           <div style={{ marginTop: "0.1rem" }}>
-            <Button type="primary" onClick={this.submit.bind(this, itemKey, isShowKey)}>
+            <Button
+              type="primary"
+              onClick={this.submit.bind(this, itemKey, isShowKey)}
+            >
               保存
             </Button>
             &nbsp;&nbsp;
-            <Button onClick={() => this.setState({ [isShowKey]: false })}>取消</Button>
+            <Button onClick={() => this.setState({ [isShowKey]: false })}>
+              取消
+            </Button>
           </div>
         </div>
       );
@@ -134,7 +162,11 @@ class UserInfo extends React.Component {
       block = (
         <Tooltip title="点击编辑">
           <div
-            className={itemKey === "username" ? styles.username : "" + " pointer " + styles.value}
+            className={
+              itemKey === "username"
+                ? styles.username
+                : " pointer " + styles.value
+            }
             onClick={() => this.setState({ [isShowKey]: true })}
           >
             {itemKey === "password" ? "********" : itemValue}
@@ -152,14 +184,18 @@ class UserInfo extends React.Component {
 
   render() {
     const { isModelShow } = this.state;
-    const { icon, username } = this.props;
+    const { icon } = this.props;
     return (
       <div className={styles.head}>
         {/* 头像昵称 */}
         <div className={styles.icon}>
           <img src={icon} alt="icon" className={styles.full} />
           <label className={styles.full}>
-            <input type="file" style={{ display: "none" }} onChange={this.changeIcon.bind(this)} />
+            <input
+              type="file"
+              style={{ display: "none" }}
+              onChange={this.changeIcon.bind(this)}
+            />
             <div className={styles.full + " " + styles.changeIcon}>
               <span>编辑</span>
             </div>
@@ -172,7 +208,11 @@ class UserInfo extends React.Component {
           {this.renderItem("密码", "password", "isPassword")}
         </div>
 
-        <PasswordCheck visible={isModelShow} onClose={() => this.setState({ isModelShow: false })} onChange={this.actionIdChange.bind(this)} />
+        <PasswordCheck
+          visible={isModelShow}
+          onClose={() => this.setState({ isModelShow: false })}
+          onChange={this.actionIdChange.bind(this)}
+        />
       </div>
     );
   }

front/src/pages/userSpace/index.jsx

@@ -1,5 +1,4 @@
 import React from "react";
-import styles from "./index.module.less";
 import MainLayout from "../../layout/MainLayout";
 import { connect } from "react-redux";
 import * as action from "../../redux/action/LoginInfoAction";
@@ -21,7 +20,6 @@ class UserSpace extends React.Component {
     this.state = {};
   }
   render() {
-    const { icon, username } = this.props;
     return (
       <MainLayout>
         <UserInfo />