Skip to content

Commit 848c4a6

Browse files
zxc0328zxc0328
authored
Merge pull request #28 from Muxi-X/pass.muxi-tech.xyz_auth_fix
Pass.muxi tech.xyz auth fix
2 parents 4f3732f + 9dcdbab commit 848c4a6

5 files changed

Lines changed: 202 additions & 75 deletions

File tree

‎src/common/service.js‎

Lines changed: 7 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -99,44 +99,14 @@ let Service = {
9999
});
100100
},
101101
// get auth-code
102-
getOauthCode(username, password) {
103-
return Fetch(
104-
'/auth/api/oauth?response_type=code&client_id=51f03389-2a18-4941-ba73-c85d08201d42',
105-
{
106-
method: 'POST',
107-
data: {
108-
username: username,
109-
password: btoa(password)
110-
}
111-
}
112-
);
113-
},
114-
// get auth-token
115-
getOauthToken(aceessCode, client_id, client_secret) {
116-
let formdata = new FormData();
117-
formdata.append('client_secret', client_secret);
118-
formdata.append('code', aceessCode);
119-
//因为要用formdata数据格式，所以暂时去掉headers，不然浏览器会自动将formdata格式转换为WebKitFormBoundary模式
120-
return Fetch(
121-
`/auth/api/oauth/token?response_type=token&grant_type=authorization_code&client_id=${client_id}`,
122-
{
123-
method: 'POST',
124-
formdata: formdata
125-
}
126-
);
127-
},
128-
//refresh-token
129-
refreshtoken(token, client_id, client_secret) {
130-
let formdata = new FormData();
131-
formdata.append('client_secret', client_secret);
132-
formdata.append('refresh_token', token);
133-
return Fetch(
134-
`/auth/api/oauth/token/refresh?grant_type=refresh_token&client_id=${client_id}`,
135-
{
136-
method: 'POST',
137-
formdata: formdata
102+
getOauthCode(username, password, client_id) {
103+
return Fetch(`/auth/api/oauth?response_type=code&client_id=${client_id}`, {
104+
method: 'POST',
105+
data: {
106+
username: username,
107+
password: btoa(password)
138108
}
139-
);
109+
});
140110
},
141111
//get user info
142112
getUserInfo() {

‎src/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
} from 'react-router-dom';
88
import reset from './pages/reset/index';
99
import Login from './pages/login/login';
10+
import Login_auth from './pages/login_auth/login';
1011
import Register from './pages/register/register';
1112
import * as serviceWorker from './serviceWorker';
1213
import ReactDOM from 'react-dom';
@@ -21,6 +22,7 @@ export default class Portal extends Component {
2122
<Route path="/Register" component={Register} />
2223
<Route path="/find_pass" component={reset} />
2324
<Route path="/login" component={Login} />
25+
<Route path="/login_auth" component={Login_auth} />
2426
</Switch>
2527
</Router>
2628
);

‎src/pages/login/login.js‎

Lines changed: 27 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -3,26 +3,31 @@ import { Link } from 'react-router-dom';
33
import Notification from 'rc-notification';
44
import 'rc-notification/assets/index.css';
55
import getCookie from '../../common/cookie';
6+
import { ERROR_CODE } from '../../common/consts';
67
import './login.css';
78
import Service from '../../common/service';
89
import Layout from '../../component/layout';
910
import Button from '../../component/common/button/button';
1011
import Input from '../../component/common/input/input';
11-
import getFromUrl from '../../common/getFromUrl';
1212

1313
class Login extends Component {
1414
componentDidMount() {
1515
if (localStorage.getItem('checked')) {
16-
Service.refreshtoken(
17-
localStorage.getItem('token'),
18-
localStorage.getItem('client_id'),
19-
localStorage.getItem('client_secret')
16+
Service.Login(
17+
localStorage.getItem('username'),
18+
localStorage.getItem('password')
2019
).then(res => {
21-
console.log(res);
20+
if (res !== null && res !== undefined) {
21+
this.setState({
22+
username: localStorage.getItem('username'),
23+
password: localStorage.getItem('password')
24+
});
25+
} else {
26+
this.failed = true;
27+
}
2228
});
2329
}
2430
}
25-
2631
constructor(props) {
2732
super(props);
2833
this.state = {
@@ -58,58 +63,42 @@ class Login extends Component {
5863
});
5964
}
6065
login() {
61-
let client_id = getFromUrl('client_id');
62-
let client_secret = getFromUrl('client_secret');
6366
const { username, password, isChecked } = this.state;
64-
console.log(username, password, isChecked);
6567
if (username && password) {
66-
Service.getOauthCode(username, password).then(res => {
67-
if (res.code === 20102) {
68+
Service.Login(username, password).then(res => {
69+
if (res.code === ERROR_CODE.USER_NOT_FOUND) {
6870
this.alert('用户不存在');
69-
} else if (res.code === 20301) {
71+
} else if (res.code === ERROR_CODE.PWD_NOT_CORRECT) {
7072
this.alert('密码错误');
7173
} else if (res.code === 0) {
72-
this.alert('登录成功，正在跳转');
73-
//如果用户勾选下次自动登录，保存此次登录信息
74+
this.alert('登录成功');
75+
// 如果登陆成功，缓存登陆信息
7476
if (isChecked) {
7577
localStorage.setItem('username', username);
7678
localStorage.setItem('password', password);
7779
localStorage.setItem('checked', isChecked);
7880
}
81+
// landing 逻辑是获取地址栏中的 landing 参数，然后在这个时候跳转。
82+
// landing 参数是应用登陆跳转到内网门户时加在 URL 里面的，比如：http://pass.muxixyz.com/?landing=work.muxixyz.com%2Flanding
83+
// 为了防止内网门户这边路由跳转时 landing 参数丢失，服务端会把 landing 放在cookie里面
84+
// 所以这个从 cookie 里获取 landing 然后跳转就可以
7985

80-
//保存code
81-
let accessCode = res.data.code;
82-
//获取token
83-
Service.getOauthToken(accessCode, client_id, client_secret).then(
84-
res => {
85-
let token = res.data.access_token;
86-
localStorage.setItem('token', token);
87-
localStorage.setItem('client_id', client_id);
88-
localStorage.setItem('client_secret', client_secret);
89-
}
90-
);
91-
//get user info
92-
Service.getUserInfo(localStorage.getItem('token')).then(res => {
93-
console.log(res);
94-
localStorage.setItem('userID', res.data.role_id);
95-
});
96-
//跳转到工作台
9786
let landing = getCookie('landing');
98-
let token = localStorage.getItem('token');
99-
let id = localStorage.getItem('userID');
10087
window.location.href =
10188
'http://' +
10289
landing +
103-
'landing/?username=' +
90+
'/?username=' +
10491
username +
10592
'&token=' +
106-
token +
93+
res.data.token +
10794
'&id=' +
108-
id;
95+
res.data.user_id;
96+
} else {
97+
this.alert('未知错误，请联系应用管理员');
10998
}
11099
});
111100
} else {
112-
this.alert('请输入用户名和密码');
101+
this.alert('用户名或密码不能为空');
113102
}
114103
}
115104

‎src/pages/login_auth/login.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.find-pass {
2+
margin-left: 100px;
3+
}
4+
.focus {
5+
cursor: pointer;
6+
}

‎src/pages/login_auth/login.js‎

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
import React, { Component } from 'react';
2+
import { Link } from 'react-router-dom';
3+
import Notification from 'rc-notification';
4+
import 'rc-notification/assets/index.css';
5+
import getCookie from '../../common/cookie';
6+
import './login.css';
7+
import Service from '../../common/service';
8+
import Layout from '../../component/layout';
9+
import Button from '../../component/common/button/button';
10+
import Input from '../../component/common/input/input';
11+
import getQueryVariable from '../../common/getFromUrl';
12+
class Login_auth extends Component {
13+
componentDidMount() {
14+
if (localStorage.getItem('checked')) {
15+
Service.Login(
16+
localStorage.getItem('username'),
17+
localStorage.getItem('password')
18+
).then(res => {
19+
if (res !== null && res !== undefined) {
20+
this.setState({
21+
username: localStorage.getItem('username'),
22+
password: localStorage.getItem('password')
23+
});
24+
} else {
25+
this.failed = true;
26+
}
27+
});
28+
}
29+
}
30+
constructor(props) {
31+
super(props);
32+
this.state = {
33+
isChecked: false,
34+
username: '',
35+
password: '',
36+
infoPassword: ''
37+
};
38+
}
39+
changeUsername(e) {
40+
this.setState({
41+
username: e.target.value
42+
});
43+
}
44+
45+
changePassword(e) {
46+
let val = e.target.value;
47+
this.setState({ password: val.substring(0, 20) });
48+
}
49+
50+
changeCheck(e) {
51+
const { isChecked } = this.state;
52+
this.setState({
53+
isChecked: !isChecked
54+
});
55+
}
56+
57+
alert(string) {
58+
Notification.newInstance({}, notification => {
59+
notification.notice({
60+
content: string
61+
});
62+
});
63+
}
64+
async login() {
65+
const { username, password, isChecked } = this.state;
66+
let client_id = getQueryVariable('client_id');
67+
if (username && password) {
68+
const res = await Service.getOauthCode(username, password, client_id);
69+
console.log(res);
70+
if (res.code === 20102) {
71+
this.alert('用户不存在');
72+
} else if (res.code === 20301) {
73+
this.alert('密码错误');
74+
} else if (res.code === 0) {
75+
this.alert('登录成功，正在跳转');
76+
let accessCode = res.data.code;
77+
console.log(accessCode);
78+
//如果用户勾选下次自动登录，保存此次登录信息
79+
if (isChecked) {
80+
localStorage.setItem('username', username);
81+
localStorage.setItem('password', password);
82+
localStorage.setItem('checked', isChecked);
83+
}
84+
//跳转到工作台
85+
let landing = getCookie('landing');
86+
window.location.href =
87+
'http://' + landing + 'landing/?' + 'accessCode=' + accessCode;
88+
}
89+
} else {
90+
this.alert('请输入用户名和密码');
91+
}
92+
}
93+
render() {
94+
const { isChecked, username, password } = this.state;
95+
return (
96+
<div>
97+
<Layout>
98+
<div className="sign-in-container">
99+
<div className="title">
100+
<div className="span1">登录</div>
101+
<div className="span2">
102+
<Link
103+
to="/register"
104+
style={{
105+
textDecoration: 'none',
106+
color: 'rgba(145,145,145,1)'
107+
}}
108+
>
109+
注册
110+
</Link>
111+
</div>
112+
</div>
113+
114+
<div className="input-prepend">
115+
<Input
116+
type="text"
117+
placeholder="用户名或邮箱"
118+
value={username}
119+
onChange={this.changeUsername.bind(this)}
120+
/>
121+
</div>
122+
<div className="input-prepend">
123+
<Input
124+
type="password"
125+
placeholder="密码"
126+
value={password}
127+
onChange={this.changePassword.bind(this)}
128+
/>
129+
</div>
130+
<div className="auto-login-btn">
131+
<Input
132+
type="checkbox"
133+
value="true"
134+
checked={isChecked}
135+
onChange={this.changeCheck.bind(this)}
136+
name="session[auto-login]"
137+
className="session-auto-login"
138+
/>
139+
<div className="focus" onClick={this.changeCheck.bind(this)}>
140+
下次自动登陆
141+
</div>
142+
<div className="find-pass">
143+
<Link to="/find_pass" style={{ textDecoration: 'none' }}>
144+
找回密码？
145+
</Link>
146+
</div>
147+
</div>
148+
<Button
149+
disabled={false}
150+
type="button"
151+
btnContent="登录"
152+
onClick={this.login.bind(this)}
153+
/>
154+
</div>
155+
</Layout>
156+
</div>
157+
);
158+
}
159+
}
160+
export default Login_auth;

0 commit comments

Comments
 (0)
⚡