1.上一节中getInitialState方法中使用了queryCurrentUser获取当前用户信息,但是要能获取当前用户信息的前提是登录成功,并且能获取到token,接下来我们先改造登录方法,实现登录
2.登录组件所在位置 src/pages/user/Login/index.jsx,点解登录按钮的前台代码如下:

  const handleSubmit = async (values) => {
    try {
      // 登录
      const msg = await login({ ...values, type });

      if (msg.status === 'ok') {
        const defaultLoginSuccessMessage = intl.formatMessage({
          id: 'pages.login.success',
          defaultMessage: '登录成功!',
        });
        message.success(defaultLoginSuccessMessage);
        await fetchUserInfo();
        /** 此方法会跳转到 redirect 参数所在的位置 */

        if (!history) return;
        const { query } = history.location;
        const { redirect } = query;
        history.push(redirect || '/');
        return;
      }

      console.log(msg); // 如果失败去设置用户错误信息

      setUserLoginState(msg);
    } catch (error) {
      const defaultLoginFailureMessage = intl.formatMessage({
        id: 'pages.login.failure',
        defaultMessage: '登录失败,请重试!',
      });
      message.error(defaultLoginFailureMessage);
    }
  };

3.找到 const msg = await login({ …values, type }); login方法代码所在位置src/services/ant-design-pro/api.js

export async function login(body, options) {
  return request('/api/login/account', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    data: body,
    ...(options || {}),
  });
}

4.我们之前介绍过若依后台的login方法的url位置为/api/login,且后台也是post方法,此处我们只需要把request的请求url改为/api/login即可
5.回到handleSubmit方法,请求后台登录成功后,我们需要获取后台返回的token,并存入到localStorage中,这样请求其他接口时,封装好的requestInterceptors才会在头中加入JWT token,保证接口能顺利访问。
5.handleSubmit方法修改完如下所示

const handleSubmit = async (values) => {
    try {
      // 登录
      const msg = await login({ ...values, type });
      console.log("mgs:",msg);
      if (msg.code === 200) {
        const defaultLoginSuccessMessage = intl.formatMessage({
          id: 'pages.login.success',
          defaultMessage: '登录成功!',
        });
        message.success(defaultLoginSuccessMessage);
        if(msg.token){
        const current = new Date();
        const expireTime = current.setTime(current.getTime() + 1000 * 12 * 60 * 60);
        localStorage.setItem('expireTime', `${expireTime}`);
        setAuthority(msg.token, msg.token, expireTime);
      }

        await fetchUserInfo();
        /** 此方法会跳转到 redirect 参数所在的位置 */

        if (!history) return;
        const { query } = history.location;
        const { redirect } = query;
        history.push(redirect || '/');
        return;
      }

      console.log(msg); // 如果失败去设置用户错误信息

      setUserLoginState(msg);
    } catch (error) {
      const defaultLoginFailureMessage = intl.formatMessage({
        id: 'pages.login.failure',
        defaultMessage: '登录失败,请重试!',
      });
      message.error(defaultLoginFailureMessage);
    }
  };

主要增加了以下代码

     if(msg.token){
        const current = new Date();
        const expireTime = current.setTime(current.getTime() + 1000 * 12 * 60 * 60);
        localStorage.setItem('expireTime', `${expireTime}`);
        setAuthority(msg.token, msg.token, expireTime);
      }

这段代码中我们使用了Token封装工具类,需要在代码中引入该类

import { setAuthority} from '@/utils/authority';

6.handleSubmit 这段代码中使用了获取用户信息的方法await fetchUserInfo(),因为我们从后台获取用户信息的方法尚未实现,所以不急着实现登录效果,下一步先实现获取用户信息的方法。

Logo

快速构建 Web 应用程序

更多推荐