登录功能学习总结（本人自用，如果对大家有帮助最好不过了）

先写后端接口：（接口文档规范自己百度）

登录：Post

…/login
用户对象->一个token字符串

注册:Post

…/register
用户对象->ok

根据字符串token获取用户信息 get

…/getMemberInfo
token->用户对象

注册发送短信接口 get

…/send/{phone}
电话字符串->ok

主要服务类

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.util.StringUtils;
import pri.ydy.commonUtils.JwtUtils;
import pri.ydy.commonUtils.MD5;
import pri.ydy.educenter.entity.UcenterMember;
import pri.ydy.educenter.entity.vo.RegisterVo;
import pri.ydy.educenter.mapper.UcenterMemberMapper;
import pri.ydy.educenter.service.UcenterMemberService;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import org.springframework.stereotype.Service;
import pri.ydy.serviceBase.exceptionhandler.GuliException;
@Service
public class UcenterMemberServiceImpl extends ServiceImpl<UcenterMemberMapper, UcenterMember> implements UcenterMemberService {

    @Autowired
    private RedisTemplate<String ,String > redisTemplate;

    @Override//登录方法
    public String login(UcenterMember member) {
        String mobile=member.getMobile();
        String password=member.getPassword();
        //手机号和密码非空判断
        if(StringUtils.isEmpty(mobile)||StringUtils.isEmpty(password)){
            throw new GuliException(20001,"账号或密码为空，登录失败");
        }

        //判断数据库中手机号是否存在
        QueryWrapper<UcenterMember> wrapper=new QueryWrapper<>();
        wrapper.eq("mobile",mobile);
        UcenterMember mobileMember = baseMapper.selectOne(wrapper);
        //判断手机号是否为空
        if (StringUtils.isEmpty(mobileMember)){
            throw new GuliException(20001,"登录失败(手机号不存在)");
        }
        //密码是否正确
        if (!MD5.encrypt(password).equals(mobileMember.getPassword())){
            throw new GuliException(20001,"登录失败（密码错误）");
        }
        //用户是否禁用
        if (mobileMember.getIsDisabled()){
            throw new GuliException(20001,"登录失败（用户禁用）");
        }
        //登录成功,根据规则jwt生成token字符串。
        String token= JwtUtils.getJwtToken(mobileMember.getId(),mobileMember.getNickname());

        return token;
    }

    //注册
    @Override
    public void register(RegisterVo registerVo) {
        //获取注册数据
        String code=registerVo.getCode();
        String mobile=registerVo.getMobile();
        String nickname = registerVo.getNickname();
        String password = registerVo.getPassword();
        //判断非空
        if (StringUtils.isEmpty(code)||StringUtils.isEmpty(mobile)||StringUtils.isEmpty(nickname)||StringUtils.isEmpty(password)){
            throw new GuliException(20001,"注册失败（存在空元素）");
        }

        //判断验证码
        //获取Redis中的验证码
        String redisCode=redisTemplate.opsForValue().get(mobile);
        //TODO 修改验证码为redisCode
        if (!code.equals("1111")){
            throw new GuliException(20001,"注册失败（验证码错误）");
        }
        //手机号是否重复
        QueryWrapper<UcenterMember> wrapper=new QueryWrapper<>();
        wrapper.eq("mobile",mobile);
        Integer integer = baseMapper.selectCount(wrapper);
        if (integer>0){
            throw new GuliException(20001,"注册失败（手机号已存在）");
        }

        //添加到数据库，注册成功
        UcenterMember member=new UcenterMember();
        member.setMobile(mobile);
        member.setPassword(MD5.encrypt(password));
        member.setNickname(nickname);
        member.setIsDisabled(false);//不禁用
        member.setAvatar("https://edu-ydy01.oss-cn-chengdu.aliyuncs.com/2020/12/19/654ee8b0b1844577af51101057cfa71dfile.png");//设置默认头像
        baseMapper.insert(member);
    }
}

前端：

前端思路:

登录和登录成功之后首页面显示数据实现过程分析

1.调用接口登录返回token字符串
2.把第一步返回token字符串放到cookie里面
3.创建前端拦截器
判断cookie里面是否有token字符串，有则将token字符串梵高header（请求头中）
4.根据token值，调用接口，根据token获取用户信息，为了首页面显示
5.根据4获得的用户信息，在首页面进行显示

submitLogin(){
        //1.调用接口进行登录，返回token字符串
            loginApi.submitLogin(this.user).then(response => {
              if(response.data.success){

                //2.把token存在cookie中、也可以放在localStorage中,第3步在request.js中
                //cookie名称，cookie值，domin作用范围
                cookie.set('guli_token', response.data.data.token, { domain: 'localhost' })
                //4. 登录成功根据token获取用户信息
                loginApi.getLoginInfo().then(response => {
                  
                  this.loginInfo = response.data.data.userInfo
                  //将用户信息记录cookie
                  cookie.set('guli_ucenter', this.loginInfo, { domain: 'localhost' })
                  //跳转页面
                  window.location.href = "/";
                })
              }
            })
      },

在request.js中配置拦截器
request.js

import axios from 'axios'
import cookie from 'js-cookie'
// 创建axios实例
const service = axios.create({
  baseURL: 'http://localhost:9001', // api的base_url
  timeout: 20000 // 请求超时时间
})

// 第三步 http request 拦截器
service.interceptors.request.use(
  config => {
  //debugger
  if (cookie.get('guli_token')) {
    //把获取的cookie值放到header里面去
    config.headers['token'] = cookie.get('guli_token');
  }
    return config
  },
  err => {
  return Promise.reject(err);
})
// http response 拦截器
export default service

在首页面中增加初始化方法showInfo，通过cookie进行数据回显。
登出则将cookie清空。

 methods: {
    showInfo() {
      //从cookie获取用户信息
      var jsonStr = cookie.get("guli_ucenter");
      //把字符串转换为json对象
      if (jsonStr) {
        this.loginInfo = JSON.parse(jsonStr);
      }
    },

    logout() {
      //清空cookie
      cookie.set("guli_ucenter", "", { domain: "localhost" });
      cookie.set("guli_token", "", { domain: "localhost" });

      //跳转页面
      window.location.href = "/";
    },
  },