Pass.muxi tech.xyz auth fix

src/common/service.js

@@ -99,44 +99,14 @@ let Service = {
     });
   },
   // get auth-code
-  getOauthCode(username, password) {
-    return Fetch(
-      '/auth/api/oauth?response_type=code&client_id=51f03389-2a18-4941-ba73-c85d08201d42',
-      {
-        method: 'POST',
-        data: {
-          username: username,
-          password: btoa(password)
-        }
-      }
-    );
-  },
-  // get auth-token
-  getOauthToken(aceessCode, client_id, client_secret) {
-    let formdata = new FormData();
-    formdata.append('client_secret', client_secret);
-    formdata.append('code', aceessCode);
-    //因为要用formdata数据格式，所以暂时去掉headers，不然浏览器会自动将formdata格式转换为WebKitFormBoundary模式
-    return Fetch(
-      `/auth/api/oauth/token?response_type=token&grant_type=authorization_code&client_id=${client_id}`,
-      {
-        method: 'POST',
-        formdata: formdata
-      }
-    );
-  },
-  //refresh-token
-  refreshtoken(token, client_id, client_secret) {
-    let formdata = new FormData();
-    formdata.append('client_secret', client_secret);
-    formdata.append('refresh_token', token);
-    return Fetch(
-      `/auth/api/oauth/token/refresh?grant_type=refresh_token&client_id=${client_id}`,
-      {
-        method: 'POST',
-        formdata: formdata
+  getOauthCode(username, password, client_id) {
+    return Fetch(`/auth/api/oauth?response_type=code&client_id=${client_id}`, {
+      method: 'POST',
+      data: {
+        username: username,
+        password: btoa(password)
       }
-    );
+    });
   },
   //get user info
   getUserInfo() {

src/index.js

@@ -7,6 +7,7 @@ import {
 } from 'react-router-dom';
 import reset from './pages/reset/index';
 import Login from './pages/login/login';
+import Login_auth from './pages/login_auth/login';
 import Register from './pages/register/register';
 import * as serviceWorker from './serviceWorker';
 import ReactDOM from 'react-dom';
@@ -21,6 +22,7 @@ export default class Portal extends Component {
           <Route path="/Register" component={Register} />
           <Route path="/find_pass" component={reset} />
           <Route path="/login" component={Login} />
+          <Route path="/login_auth" component={Login_auth} />
         </Switch>
       </Router>
     );

src/pages/login/login.js

@@ -3,26 +3,31 @@ import { Link } from 'react-router-dom';
 import Notification from 'rc-notification';
 import 'rc-notification/assets/index.css';
 import getCookie from '../../common/cookie';
+import { ERROR_CODE } from '../../common/consts';
 import './login.css';
 import Service from '../../common/service';
 import Layout from '../../component/layout';
 import Button from '../../component/common/button/button';
 import Input from '../../component/common/input/input';
-import getFromUrl from '../../common/getFromUrl';
 
 class Login extends Component {
   componentDidMount() {
     if (localStorage.getItem('checked')) {
-      Service.refreshtoken(
-        localStorage.getItem('token'),
-        localStorage.getItem('client_id'),
-        localStorage.getItem('client_secret')
+      Service.Login(
+        localStorage.getItem('username'),
+        localStorage.getItem('password')
       ).then(res => {
-        console.log(res);
+        if (res !== null && res !== undefined) {
+          this.setState({
+            username: localStorage.getItem('username'),
+            password: localStorage.getItem('password')
+          });
+        } else {
+          this.failed = true;
+        }
       });
     }
   }
-
   constructor(props) {
     super(props);
     this.state = {
@@ -58,58 +63,42 @@ class Login extends Component {
     });
   }
   login() {
-    let client_id = getFromUrl('client_id');
-    let client_secret = getFromUrl('client_secret');
     const { username, password, isChecked } = this.state;
-    console.log(username, password, isChecked);
     if (username && password) {
-      Service.getOauthCode(username, password).then(res => {
-        if (res.code === 20102) {
+      Service.Login(username, password).then(res => {
+        if (res.code === ERROR_CODE.USER_NOT_FOUND) {
           this.alert('用户不存在');
-        } else if (res.code === 20301) {
+        } else if (res.code === ERROR_CODE.PWD_NOT_CORRECT) {
           this.alert('密码错误');
         } else if (res.code === 0) {
-          this.alert('登录成功，正在跳转');
-          //如果用户勾选下次自动登录，保存此次登录信息
+          this.alert('登录成功');
+          // 如果登陆成功，缓存登陆信息
           if (isChecked) {
             localStorage.setItem('username', username);
             localStorage.setItem('password', password);
             localStorage.setItem('checked', isChecked);
           }
+          // landing 逻辑是获取地址栏中的 landing 参数，然后在这个时候跳转。
+          // landing 参数是应用登陆跳转到内网门户时加在 URL 里面的，比如：http://pass.muxixyz.com/?landing=work.muxixyz.com%2Flanding
+          // 为了防止内网门户这边路由跳转时 landing 参数丢失，服务端会把 landing 放在cookie里面
+          // 所以这个从 cookie 里获取 landing 然后跳转就可以
 
-          //保存code
-          let accessCode = res.data.code;
-          //获取token
-          Service.getOauthToken(accessCode, client_id, client_secret).then(
-            res => {
-              let token = res.data.access_token;
-              localStorage.setItem('token', token);
-              localStorage.setItem('client_id', client_id);
-              localStorage.setItem('client_secret', client_secret);
-            }
-          );
-          //get user info
-          Service.getUserInfo(localStorage.getItem('token')).then(res => {
-            console.log(res);
-            localStorage.setItem('userID', res.data.role_id);
-          });
-          //跳转到工作台
           let landing = getCookie('landing');
-          let token = localStorage.getItem('token');
-          let id = localStorage.getItem('userID');
           window.location.href =
             'http://' +
             landing +
-            'landing/?username=' +
+            '/?username=' +
             username +
             '&token=' +
-            token +
+            res.data.token +
             '&id=' +
-            id;
+            res.data.user_id;
+        } else {
+          this.alert('未知错误，请联系应用管理员');
         }
       });
     } else {
-      this.alert('请输入用户名和密码');
+      this.alert('用户名或密码不能为空');
     }
   }
 

src/pages/login_auth/login.css

@@ -0,0 +1,6 @@
+.find-pass {
+  margin-left: 100px;
+}
+.focus {
+  cursor: pointer;
+}

src/pages/login_auth/login.js

@@ -0,0 +1,160 @@
+import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
+import Notification from 'rc-notification';
+import 'rc-notification/assets/index.css';
+import getCookie from '../../common/cookie';
+import './login.css';
+import Service from '../../common/service';
+import Layout from '../../component/layout';
+import Button from '../../component/common/button/button';
+import Input from '../../component/common/input/input';
+import getQueryVariable from '../../common/getFromUrl';
+class Login_auth extends Component {
+  componentDidMount() {
+    if (localStorage.getItem('checked')) {
+      Service.Login(
+        localStorage.getItem('username'),
+        localStorage.getItem('password')
+      ).then(res => {
+        if (res !== null && res !== undefined) {
+          this.setState({
+            username: localStorage.getItem('username'),
+            password: localStorage.getItem('password')
+          });
+        } else {
+          this.failed = true;
+        }
+      });
+    }
+  }
+  constructor(props) {
+    super(props);
+    this.state = {
+      isChecked: false,
+      username: '',
+      password: '',
+      infoPassword: ''
+    };
+  }
+  changeUsername(e) {
+    this.setState({
+      username: e.target.value
+    });
+  }
+
+  changePassword(e) {
+    let val = e.target.value;
+    this.setState({ password: val.substring(0, 20) });
+  }
+
+  changeCheck(e) {
+    const { isChecked } = this.state;
+    this.setState({
+      isChecked: !isChecked
+    });
+  }
+
+  alert(string) {
+    Notification.newInstance({}, notification => {
+      notification.notice({
+        content: string
+      });
+    });
+  }
+  async login() {
+    const { username, password, isChecked } = this.state;
+    let client_id = getQueryVariable('client_id');
+    if (username && password) {
+      const res = await Service.getOauthCode(username, password, client_id);
+      console.log(res);
+      if (res.code === 20102) {
+        this.alert('用户不存在');
+      } else if (res.code === 20301) {
+        this.alert('密码错误');
+      } else if (res.code === 0) {
+        this.alert('登录成功，正在跳转');
+        let accessCode = res.data.code;
+        console.log(accessCode);
+        //如果用户勾选下次自动登录，保存此次登录信息
+        if (isChecked) {
+          localStorage.setItem('username', username);
+          localStorage.setItem('password', password);
+          localStorage.setItem('checked', isChecked);
+        }
+        //跳转到工作台
+        let landing = getCookie('landing');
+        window.location.href =
+          'http://' + landing + 'landing/?' + 'accessCode=' + accessCode;
+      }
+    } else {
+      this.alert('请输入用户名和密码');
+    }
+  }
+  render() {
+    const { isChecked, username, password } = this.state;
+    return (
+      <div>
+        <Layout>
+          <div className="sign-in-container">
+            <div className="title">
+              <div className="span1">登录</div>
+              <div className="span2">
+                <Link
+                  to="/register"
+                  style={{
+                    textDecoration: 'none',
+                    color: 'rgba(145,145,145,1)'
+                  }}
+                >
+                  注册
+                </Link>
+              </div>
+            </div>
+
+            <div className="input-prepend">
+              <Input
+                type="text"
+                placeholder="用户名或邮箱"
+                value={username}
+                onChange={this.changeUsername.bind(this)}
+              />
+            </div>
+            <div className="input-prepend">
+              <Input
+                type="password"
+                placeholder="密码"
+                value={password}
+                onChange={this.changePassword.bind(this)}
+              />
+            </div>
+            <div className="auto-login-btn">
+              <Input
+                type="checkbox"
+                value="true"
+                checked={isChecked}
+                onChange={this.changeCheck.bind(this)}
+                name="session[auto-login]"
+                className="session-auto-login"
+              />
+              <div className="focus" onClick={this.changeCheck.bind(this)}>
+                下次自动登陆
+              </div>
+              <div className="find-pass">
+                <Link to="/find_pass" style={{ textDecoration: 'none' }}>
+                  找回密码？
+                </Link>
+              </div>
+            </div>
+            <Button
+              disabled={false}
+              type="button"
+              btnContent="登录"
+              onClick={this.login.bind(this)}
+            />
+          </div>
+        </Layout>
+      </div>
+    );
+  }
+}
+export default Login_auth;