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

先写后端接口:(接口文档规范自己百度)

登录: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 = "/";
    },
  }, 
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值