Articles19
Tags0
Categories0

关于Antd Pro框架的登录逻辑

关于antd pro框架的登录逻辑

在首页点击登录退出后触发登录退出的action

dispatch({
    type: 'login/logout'
}) 

登录退出的action

* logout(_, { put }){
    //改变登录的状态并设置权限为guest
    yield put({

        type: 'changeLoginStatus',

        payload: {

            status: false,

            currentAuthority: 'guest'

        },

    })

    reloadAuthorized();

    yield put(
        //跳转到/user/login?stringify({redirect:window.location.href})

        routerRedux.push({

            pathname: '/user/login',

            search: stringify({

                redirect: window.location.href

            })

        })

    )

}

此处,补充关于异步effect的put和call的作用:

effects 有三个参数:put用于触发 action 。
yield put({ type: 'todos/add', payload: 'Learn Dva' });
call用于调用异步逻辑,支持 promise 。
const result = yield call(fetch, '/todos');

select用于从 state 里获取数据。
const todos = yield select(state => state.todos);

reducers:

reducers: function changeLoginStatus(state, { payload }) {
    setAuthority(payload.currentAuthority)
    return

    {   
        ...state,
        status: payload.status,
        type: payload.type
    }
}

跳转到登录页面:账号密码登录或手机号码登录

1566371766685

此处以账号密码登录

校验信息==》非空后,将值提交

校验:

//错误提示信息

renderMessage = content => (
    <Alert style={{ marginBottom: 24 }} message={content} type="error" showIcon />
);

在render()中的password添加一句

onPressEnter={() => this.loginForm.validateFields(this.handleSubmit)}

作为校验的时机:提交后校验

<Password
    name="password"
    placeholder="888888/123456"
    //校验子节点的时机
    onPressEnter={() => this.loginForm.validateFields(this.handleSubmit)}
/>

登录

dispatch({
    type: 'login/login',
    payload: {
        ...values,
        type,
    },
});

登录的action:

* login({ payload }, { call, put }){
    const response = yield call(fakeAccountLogin, payload);
    yield put({
        type: 'changeLoginStatus',
        payload: response,
    })
    if (response.status === 'ok') {
        reloadAuthorized();
        //当前页面还是login/user,登录的页面,如何通过window.location.href得出要重定向到首页?
        const urlParams = new URL(window.location.href);
        //params是地址后面?后的参数
        const params = getPageQuery();
        let { redirect } = params;
        //redirect: http://localhost:8000/dashboard/analysis
        //origin: "http://localhost:8000"
        if (redirect) {
            const redirectUrlParams.origin=== urlParams.origin) {
                redirect = redirect.substr(urlParams.origin.length);
                //redirect:/dashboard/analysis
                // console.log("redirect",redirect)
                if (redirect.startsWith('/#')) {
                    redirect = redirect.substr(2);
                }
            }else {
                window.locatin.href = redirect;
                return;
            }
        }
        yield put(routerRedux.replace(redirect || '/'));

    }

}

service api:

export async function fakeAccountLogin(params) {
    return request('/api/login/account', {
        method: 'POST',
        body: params,
    });
}

mock:

'POST /api/login/account': (req, res) => {

    const { password, userName, type } = req.body;

    if (password === '888888' && userName === 'admin') {

        res.send({

            status: 'ok',

            type,

            currentAuthority: 'admin',

        });

        return;

    }

    if (password === '123456' && userName === 'user') {

        res.send({

            status: 'ok',

            type,

            currentAuthority: 'user',

        });

        return;

    }

    res.send({

        status: 'error',

        type,

        currentAuthority: 'guest',

    });

},

在这里,登录成功后是跳转到框架首页,此处是通过window.location.href来重定向打开的页面

 export function getPageQuery() {
   return parse(window.location.href.split('?')[1]);
 }
Author:shuo
Link:http://yoursite.com/2019/08/28/登陆逻辑/
版权声明:本文采用 CC BY-NC-SA 3.0 CN 协议进行许可