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

2019-11-26 00:03:55 +08:00 · 2019-11-26 00:03:55 +08:00 · c3cefd2db2
commit c3cefd2db2
parent c695cf1d2a
7 changed files with 137 additions and 28 deletions
--- a/front/src/App.jsx
+++ b/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 */}
--- a/front/src/components/PasswordCheck.jsx
+++ b/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}>
-        <Input.Password placeholder="输入旧密码" value={password} onChange={e => this.setState({ password: e.target.value })} />
+      <Modal
+        title="密码校验"
+        visible={visible}
+        onOk={this.submit.bind(this)}
+        onCancel={onClose}
+      >
+        <Input.Password
+          placeholder="输入旧密码"
+          value={password}
+          onChange={e => this.setState({ password: e.target.value })}
+        />
      </Modal>
    );
  }
--- a/front/src/pages/public/EmailVerify/index.jsx
+++ b/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);
--- a/front/src/pages/userSpace/SsoAuth/index.jsx
+++ b/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;
--- a/front/src/pages/userSpace/SsoAuth/index.module.less
+++ b/front/src/pages/userSpace/SsoAuth/index.module.less
@ -0,0 +1,6 @@
+@import "../../../global.less";
+
+.message {
+  position: relative;
+  left: 1111111111px;
+}
--- a/front/src/pages/userSpace/components/UserInfo/index.jsx
+++ b/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 value={repeatPassword} placeholder="重复密码" onChange={e => this.setState({ repeatPassword: e.target.value })} />
+              <Input.Password
+                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>
    );
  }
--- a/front/src/pages/userSpace/index.jsx
+++ b/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 />