基于用户认证的前后端实现

野性酷女 2021-07-24 23:02 474阅读 0赞

# 一 准备 #

## 1 引入依赖 ##

common-util中引入jwt依赖

<dependencies>
        <dependency>
            <groupId>io.jsonwebtoken</groupId>
            <artifactId>jjwt</artifactId>
        </dependency>
        <dependency>
            <groupId>joda-time</groupId>
            <artifactId>joda-time</artifactId>
        </dependency>
    </dependencies>

## 2 引入工具类 ##

common-util中引入工具类：JwtUtils.java、JwtInfo.java

JwtUtils.java

public class JwtUtils {
        /**
         * 密钥字符串
         */
        public static final String APP_SECRET = "ukc8BDbRigUDaY6pZFfWus2jZWLPHO";
    
        /**
         * 功能描述：获得密钥实例
         *
         * @return Key 密钥实例
         * @author cakin
         * @date 2020/12/27
         */
        private static Key getKeyInstance() {
            SignatureAlgorithm signatureAlgorithm = SignatureAlgorithm.HS256;
            byte[] bytes = DatatypeConverter.parseBase64Binary(APP_SECRET);
            return new SecretKeySpec(bytes, signatureAlgorithm.getJcaName());
        }
    
        /**
         * 功能描述：获取Jwt的token
         *
         * @param jwtInfo 用户信息
         * @param expire 过期时间
         * @return String
         * @author cakin
         * @date 2020/12/27
         */
        public static String getJwtToken(JwtInfo jwtInfo, int expire) {
            String JwtToken = Jwts.builder()
                    .setHeaderParam("typ", "JWT")
                    .setHeaderParam("alg", "HS256")
                    .setSubject("guli-user") // 主题
                    .setIssuedAt(new Date()) // 颁发时间
                    .setExpiration(DateTime.now().plusSeconds(expire).toDate()) // 过期时间
                    .claim("id", jwtInfo.getId()) // 用户id
                    .claim("nickname", jwtInfo.getNickname()) // 用户昵称
                    .claim("avatar", jwtInfo.getAvatar()) // 用户头像
                    .signWith(SignatureAlgorithm.HS256, getKeyInstance())
                    .compact();
            return JwtToken;
        }
    
        /**
         * 判断token是否存在与有效
         *
         * @param jwtToken jwtToken
         * @return boolean 是否有效
         */
        public static boolean checkJwtTToken(String jwtToken) {
            if (StringUtils.isEmpty(jwtToken)) return false;
            try {
                Jwts.parser().setSigningKey(getKeyInstance()).parseClaimsJws(jwtToken);
            } catch (Exception e) {
                e.printStackTrace();
                return false;
            }
            return true;
        }
    
        /**
         * 判断token是否存在与有效
         *
         * @param request http请求
         * @return boolean JWT是否有效
         */
        public static boolean checkJwtTToken(HttpServletRequest request) {
            try {
                String jwtToken = request.getHeader("token");
                if (StringUtils.isEmpty(jwtToken)) return false;
                Jwts.parser().setSigningKey(getKeyInstance()).parseClaimsJws(jwtToken);
            } catch (Exception e) {
                e.printStackTrace();
                return false;
            }
            return true;
        }
    
    
        /**
         * 根据token获取会员id
         *
         * @param request http请求
         * @return JwtInfo JWt中的会员信息
         */
        public static JwtInfo getMemberIdByJwtToken(HttpServletRequest request) {
            String jwtToken = request.getHeader("token");
            if (StringUtils.isEmpty(jwtToken)) return null;
            Jws<Claims> claimsJws = Jwts.parser().setSigningKey(getKeyInstance()).parseClaimsJws(jwtToken);
            Claims claims = claimsJws.getBody();
            JwtInfo jwtInfo = new JwtInfo(claims.get("id").toString(), claims.get("nickname").toString(), claims.get("avatar").toString());
            return jwtInfo;
        }
    }

JwtInfo.java

@Data
    @AllArgsConstructor
    @NoArgsConstructor
    public class JwtInfo {
        /**
         * 用户id
         */
        private String id;
        /**
         * 昵称
         */
        private String nickname;
        /**
         * 图像
         */
        private String avatar;
        //权限、角色等
        //不要存敏感信息
    }

## 二 用户登录接口 ##

## 1 定义LoginVo ##

/**
    * @className: LoginVo
    * @description: 用户登录信息
    * @date: 2020/12/27
    * @author: cakin
    */
    @Data
    public class LoginVo implements Serializable {
        private static final long serialVersionUID = 1L;
        /**
         * 手机号
         */
        private String mobile;
        /**
         * 用户密码
         */
        private String password;
    }

## 2 service实现登录 ##

接口：MemberService

/**
    * 功能描述：登录接口
    *
    * @author cakin
    * @date 2020/12/27
    * @param loginVo 用户登录信息
    * @return String Jwt token
    */
    String login(LoginVo loginVo);

实现： MemberServiceImpl

/**
    * 功能描述：登录接口
    *
    * @param loginVo 用户登录信息
    * @return String Jwt token
    * @author cakin
    * @date 2020/12/27
    */
    @Override
    public String login(LoginVo loginVo) {
        String mobile = loginVo.getMobile();
        String password = loginVo.getPassword();
        // 校验：参数（手机号、密码）是否合法
        if (StringUtils.isEmpty(mobile)
                || !FormUtils.isMobile(mobile)
                || StringUtils.isEmpty(password)) {
            throw new GuliException(ResultCodeEnum.PARAM_ERROR);
        }
        // 校验手机号是否存在
        QueryWrapper<Member> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("mobile", mobile);
        Member member = baseMapper.selectOne(queryWrapper);
        if (member == null) {
            throw new GuliException(ResultCodeEnum.LOGIN_MOBILE_ERROR);
        }
        // 校验密码是否正确
        if (!MD5.encrypt(password).equals(member.getPassword())) {
            throw new GuliException(ResultCodeEnum.LOGIN_PASSWORD_ERROR);
        }
        // 校验用户是否被禁用
        if (member.getDisabled()) {
            throw new GuliException(ResultCodeEnum.LOGIN_DISABLED_ERROR);
        }
        // 登录：生成token
        JwtInfo info = new JwtInfo();
        info.setId(member.getId());
        info.setNickname(member.getNickname());
        info.setAvatar(member.getAvatar());
        String jwtToken = JwtUtils.getJwtToken(info, 1800);
        return jwtToken;
    }

## 3 登录接口 ##

/**
    * 功能描述：登录接口
    *
    * @author cakin
    * @date 2020/12/27
    * @param loginVo 登录信息
    * @return R 返回给前端的信息
    */
    @ApiOperation(value = "会员登录")
    @PostMapping("login")
    public R login(@RequestBody LoginVo loginVo){
        String token = memberService.login(loginVo);
        return R.ok().data("token", token).message("登录成功");
    }

# 三 前端整合 #

## 1 安装cookie模块 ##

npm install js-cookie@2.2.0

## 2 api ##

import request from '~/utils/request'
    // import cookie from 'js-cookie'
    // 提交登录信息
    export default {
      submitLogin(user) {
        return request({
          baseURL: 'http://localhost:8160',
          url: '/api/ucenter/member/login',
          method: 'post',
          data: user
        })
      },
    }

## 3 登录页核心代码 ##

import cookie from 'js-cookie'
    import loginApi from '~/api/login'
    export default {
      layout: 'sign',
      data() {
        return {
          user: {
            mobile: '',
            password: ''
          }
        }
      },
      methods: {
        // 登录
        submitLogin() {
          // 执行远程登录接口调用
          loginApi.submitLogin(this.user).then(response => {
            // 将jwt写入cookie
            cookie.set('guli_jwt_token', response.data.token, { domain: 'localhost' })
            // 跳转到网站的首页面
            window.location.href = '/'
          })
        }
      }
    }
    </script>

## 4 测试 ##

查看cookie中存储了jwtToken值

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/7c03047ec8d04e358c2cc114af04de1f.png