zoukankan      html  css  js  c++  java
  • 登录组件的逻辑

    登录组件的

    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,一种使用用户名与密码。

    坚持下去就能成功
  • 相关阅读:
    Android简介(8H)思维导图
    Android章节练习题及答案
    付费方式选择——选项菜单的创建和使用
    Android——选项菜单的实现
    思维导图——四级词汇2
    jquery:为动态加载的元素绑定事件
    tcp/ip协议详解
    Atom实用插件
    如何让textarea不可拖拽
    移动端网站中手机号唤起拨号界面
  • 原文地址:https://www.cnblogs.com/suoking/p/14682261.html
Copyright © 2011-2022 走看看