登录组件的逻辑

登录组件的

componentDidMount生命周期函数中,作如下几个事情:
1、向用户接口发送信息,如果返回用户信息和配置信息,并且响应后判断cookie中是否有token,如果有,拿着token进行登录验证
2、调用fetchUser带上token。
 
这样做的话,当已经登录的用户,其请求中的cookie是会带着token的,此时访问login页面会自动登录,而未登录的用户则会展示登录页面。
 
fetchUser的函数如下:
  1 const fetchUser = (obj, message, context, token) => {
  2 
  3     let hostname = window.location.hostname;
  4     let i = 0;
  5     if (hostname.indexOf('.') >= 0) {
  6         i = hostname.indexOf('.');
  7     }
  8     let domain = hostname.slice(i);
  9 
 10     if (token) {
 11         return async function (dispatch) {
 12             try {
 13 
 14                 let res = await get({url: `/custom/v2/passer/gym/cmd/getTokenInfo?token=${token}`}, message, context)
 15 
 16                 if (res.success && res.data) {
 17                     res.data.gymId = res.data.GymId;
 18                     res.data.token = token;
 19                     dispatch({
 20                         type: 'fetchUserDone',
 21                         res: {...res},
 22                     })
 23                     /*if(navigator.userAgent.includes('MSIE')||navigator.userAgent.includes('Trident')){
 24                         Cookies.set('token', token);
 25                     }else {
 26                         Cookies.set('token', token, {expires: 7, domain});
 27                     }*/
 28                     Cookies.set('token', token, {expires: 7, domain});
 29                     if (res.data.GymId == '0000000001') {//平台用户
 30                         dispatch(addRole({}, message, context))
 31                         setItem('role', 'admin')
 32                         context.props.history.push("/home/gym/gymList");
 33                     }else if(res.data.GymId == '0000000002'){//监管用户
 34                         setItem('role', 'admin')
 35                         context.props.history.push("/home/gym/staffList");
 36                     }else {
 37                         setItem('role', '')
 38                         context.props.history.push("/home");
 39                     }
 40 
 41                 } else {
 42                     Cookies.remove('token');
 43                     Cookies.remove('token', token, {expires: 7, domain});
 44                     /*if(navigator.userAgent.includes('MSIE')||navigator.userAgent.includes('Trident')){
 45                         Cookies.remove('token');
 46                     }else {
 47                         Cookies.remove('token', token, {expires: 7, domain});
 48 
 49                     }*/
 50                 }
 51             } catch (e) {
 52 
 53             }
 54         }
 55     } else {
 56         return async function (dispatch) {
 57             dispatch(loading(true));
 58             try {
 59                 let res = await postBodyJSON({
 60                     url: api.login,
 61                     data: {user_name: obj.username, password: obj.password}
 62                 }, message, context)
 63                 //console.log(1111,res);
 64 
 65                 dispatch(loading(false));
 66                 if (res.common_message && res.common_message.err_msg) {
 67                     message.error(res.common_message.err_msg);
 68                     dispatch({
 69                         type: 'fetchUserErr',
 70                         res: {...res, success: false}
 71                     })
 72                 } else if (res.message) {
 73                     message.error(res.message);
 74                     dispatch({
 75                         type: 'fetchUserErr',
 76                         res: {...res, success: false}
 77                     })
 78                 } else {
 79                     let token=res.data.token;
 80                     try {
 81 
 82                         let res = await get({url: `/custom/v2/passer/gym/cmd/getTokenInfo?token=${token}`}, message, context)
 83 
 84                         if (res.success && res.data) {
 85                             res.data.gymId = res.data.GymId;
 86                             res.data.token = token;
 87                             console.log(res.data.Role)
 88                             if (res.data.Role === "admin" || res.data.Role === "region"){
 89                                 // 阻止没有权限的人员登录;
 90                                 message.error('用户没有权限登录');
 91                                 return;
 92                             }
 93                             
 94                             dispatch({
 95                                 type: 'fetchUserDone',
 96                                 res: {...res},
 97                             })
 98 
 99                             /*if(navigator.userAgent.includes('MSIE')||navigator.userAgent.includes('Trident')){
100                                 Cookies.set('token', token);
101                             }else {
102                                 Cookies.set('token', token, {expires: 7, domain});
103                             }*/
104                             Cookies.set('token', token, {expires: 7, domain});
105                             if (res.data.GymId == '0000000001') {//平台用户
106                                 dispatch(addRole({}, message, context))
107                                 setItem('role', 'admin')
108                                 context.props.history.push("/home/gym/gymList");
109                             }else if(res.data.GymId == '0000000002'){//监管用户
110                                 setItem('role', 'admin')
111                                 context.props.history.push("/home/gym/staffList");
112                             }else {
113                                 setItem('role', '')
114                                 context.props.history.push("/home");
115                             }
116 
117                         } else {
118                             Cookies.remove('token');
119                             Cookies.remove('token', token, {expires: 7, domain});
120                             /*if(navigator.userAgent.includes('MSIE')||navigator.userAgent.includes('Trident')){
121                                 Cookies.remove('token');
122                             }else {
123                                 Cookies.remove('token', token, {expires: 7, domain});
124                             }*/
125                             //Cookies.remove('token', token, {expires: 7, domain});
126                         }
127                     } catch (e) {
128 
129                     }
130                     /*dispatch({
131                         type: 'fetchUserDone',
132                         res: {...res},
133                     })
134 
135                     Cookies.set('token', res.data.token, {expires: 7, domain});
136                     if (res.success && res.data && res.data.gymId == '0000000001') {
137                         dispatch(addRole({}, message, context))
138                         setItem('role', 'admin')
139                         context.props.history.push("/home/gym/gymList");
140                     } else if(res.success && res.data && res.data.gymId == '0000000002'){//监管用户
141                        //hydsadmin
142                         setItem('role', 'admin')
143                         context.props.history.push("/home/gym/staffList");
144                     }else if (res.success && res.data) {
145                         setItem('role', '')
146                         context.props.history.push("/home");
147                     }*/
148 
149                 }
150 
151 
152             } catch (e) {
153                 // console.log(e)
154                 dispatch(loading(false));
155                 dispatch({
156                     type: 'fetchUserErr',
157                     res: {...e, success: false}
158                 })
159             }
160 
161 
162         }
163     }
164 
165 }

fetchUser内部实现了两种登录方式,一种使用token,一种使用用户名与密码。

坚持下去就能成功
原文地址:https://www.cnblogs.com/suoking/p/14682261.html