Vue 加 SpringBoot tacken 实现登录验证

1. 用户点击提交 前台发送请求

methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {

            loginApi.submitLogin(this.userFrom)
            .then(res=>{
              console.log(res)
              if(res.data.code==2000){
                  alert("登录成功!")
                  // 1. 获得token
                  console.log("tocken的值:"+res.data.data.tocken)
                  // 2. 把返回的taken字符串放到cookie里面 参数一 cookie名称 参数二 后台参数 第三个 作用范围
                  cookie.set('user_tocken',res.data.data.tocken,{domain:'localhost'})
                  // 3.创建拦截器
                  // 4.调用接口 更据tocken获取用户信息 为了页面显示
                  loginApi.getLoginUserInfo()
                    .then(res=>{
                      console.log("--------------"+res.data.data.userInfo.userId)
                      // 放到cookie 用户信息  user_token2
                      cookie.set('user_tocken2',res.data.data.userInfo,{domain:'localhost'})
                    })
                  // 跳转
                  this.$router.push("/index")
              }
            })
            .catch(res=>{
              alert('服务器开小差了,请稍后重试...');
            })
          } else {
            alert('账号或密码不符合规范...');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }

2. 后台: 最终返回一个 return ResultEntity.ok().data(“tocken”,tocken);

// 1. 登录判断
@PostMapping("/findUser")
public ResultEntity getUser( @RequestBody SysUser sysUser){
    // 返回tocken
    String tocken = sysUserService.getSysUserByUserNoUserPwd(sysUser);
    System.out.println("参数--------"+sysUser);
    return ResultEntity.ok().data("tocken",tocken);
}

服务层:

// 登录验证
public String getSysUserByUserNoUserPwd(SysUser sysUser) {
    // 获取手机号和密码
    Integer userNo = sysUser.getUserNo();
    String userNos = userNo.toString();
    String userPwd = sysUser.getUserPwd();
    // 如果手机号和密码有一个为空
    if (StringUtils.isEmpty(userNos) || StringUtils.isEmpty(userPwd)) {
        throw new GuliException(CrowdConstant.ERROR, CrowdConstant.USER_PASSWORD_NULL);
    }
    // 学号存不存在
    QueryWrapper wrapper = new QueryWrapper<>();
    wrapper.eq("user_no", userNo);
    SysUser sysUser1 = baseMapper.selectOne(wrapper);
    // 判断对象为空不
    if (sysUser1 == null) {
        throw new GuliException(CrowdConstant.ERROR, CrowdConstant.LOGIN_ERROR);
    }
    System.out.println("数据库查出来的"+sysUser1);
    // 判断密码相等不
    // 先把获得的数据加密
    String s = CrowdUtil.md5(userPwd, CrowdConstant.password_ENCRYPTION);
    if (!s.equals(sysUser1.getUserPwd())) {
        throw new GuliException(CrowdConstant.ERROR, CrowdConstant.LOGIN_ERROR);
    }
    // 判断是否被禁用
    if (sysUser1.getUserStatus() == 1) {
        throw new GuliException(CrowdConstant.ERROR, CrowdConstant.LOGIN_ERROR);
    }
    //登录成功 传递id 和 用户名
    String jwtToken = JwtUtils.getJwtToken(sysUser1.getUserId(),sysUser1.getUserNo());
    // 返回参数
    return jwtToken;
}

要获得jwtToken 

public static final long EXPIRE = 1000 * 60 * 5 ; // 过期时间 这里设置5分钟
public static final String APP_SECRET = "ssx5211314WPL"; // 密钥 自已设

// 生成token字符串方法
public static String getJwtToken(Integer userId, Integer userNo){

    System.out.println("传过来的id:"+userId+",传过来的学号:"+userNo);

    String JwtToken = Jwts.builder()
            // 设置头信息 固定
            .setHeaderParam("typ", "JWT")
            .setHeaderParam("alg", "HS256")
            // 设置过期时间
            .setSubject("guli-user")
            .setIssuedAt(new Date())
            .setExpiration(new Date(System.currentTimeMillis() + EXPIRE))
            // 设置用户主体(数据) 这里放id与用户名
            .claim("userId", userId)
            .claim("userNo", userNo)
            // 设置密钥 上面自已设的
            .signWith(SignatureAlgorithm.HS256, APP_SECRET)
            .compact();
    return JwtToken;
}

3. 前台

// 2. 把返回的taken字符串放到cookie里面 参数一 cookie名称 参数二 后台参数 第三个 作用范围
 cookie.set('user_tocken',res.data.data.tocken,{domain:'localhost'})

4. 拦截器 最终 config.headers[‘tocken’] = cookie.get(‘user_tocken’)

import axios from 'axios'
import cookie from 'js-cookie'

// axios发请求
const service = axios.create({
  baseURL : 'http://localhost:8082', // 后台请求地址
  timeout: 20000 // 最大请求时间
})

// request创建拦截器
service.interceptors.request.use(
  config => {
    //更据名称 获取cookie
    if(cookie.get('user_tocken')){
      console.log("拦截器"+cookie.get('user_tocken'))
      config.headers['tocken'] = cookie.get('user_tocken')  
    }
    return config;
  },
  err => {
    return Promise.reject(err)
  }
)



// 向外暴露
export default service

5. 登录上面来验证成功 向后台发请求 获得用户信息 下面后台 cookie.set(‘user_tocken2’,res.data.data.userInfo,{domain:‘localhost’}) 返回 cookie

// 4.调用接口 更据tocken获取用户信息 为了页面显示
                  loginApi.getLoginUserInfo()
                    .then(res=>{
                      console.log("--------------"+res.data.data.userInfo.userId)
                      // 放到cookie 用户信息  user_token2
                      cookie.set('user_tocken2',res.data.data.userInfo,{domain:'localhost'})
                    })

6. 后台 最终返回 return ResultEntity.ok().data(“userInfo”,user);

// 4.更据token获得用户信息
@GetMapping("/getMomberInfo")
public ResultEntity getMomberInfo(HttpServletRequest request){

    System.out.println("请求头"+request);

    // 调用工具类 获得用户request对象 获取头信息 返回用户id
    String id = JwtUtils.getMemberIdByJwtToken(request);
    // 查询数据库 获取用户信息
    SysUser user = sysUserService.getById(id);
    System.out.println("参数-----------"+user);
    return ResultEntity.ok().data("userInfo",user);
}

服务层
/**
 * 根据token获取ID
 * @param request
 * @return
 */
public static String getMemberIdByJwtToken(HttpServletRequest request) {
    String jwtToken = request.getHeader("tocken");
    System.out.println("tocken的值-----------"+jwtToken);
    if(StringUtils.isEmpty(jwtToken)) return "";

    System.out.println("--------------------");

    Jws claimsJws = Jwts.parser().setSigningKey(APP_SECRET).parseClaimsJws(jwtToken);
    Claims claims = claimsJws.getBody();

    System.out.println("---------获得参数-----------");

    // 取值 更据key 上面自已设的
    Object userId = claims.get("userId");
    String s = userId.toString();
    System.out.println("ssssssssssssssss"+s.length());
    System.out.println("参数________________"+userId);
    return s;
}

7. 前台: 上面把cookie放了 这里直接获取

showInfo(){
        alert(123132132)
        // 从cookie获取信息
        var userStr = cookie.get('user_tocken2')  
        console.log("aaaaaa---"+userStr)
        if(userStr){
          // 赋值
          var a  = JSON.parse(userStr);
          alert(a.userId)
        }
      }

以后想要数据 在界面掉 var userStr = cookie.get(‘user_tocken2’) 就行了

也可以验证登录没登录

SSSSSSSSSSSSSSSSXXXXXXXXXXXXXXXXXXXXX
SSSSSSSSSSSSSSSSXXXXXXXXXXXXXXXXXXXXX
SSSSSSSSSSSSSSSSXXXXXXXXXXXXXXXXXXXXX
SSSSSSSSSSSSSSSSXXXXXXXXXXXXXXXXXXXXXSSSSSSSSSSSSSSSSXXXXXXXXXXXXXXXXXXXXXSSSSSSSSSSSSSSSSXXXXXXXXXXXXXXXXXXXXXSSSSSSSSSSSSSSSSXXXXXXXXXXXXXXXXXXXXXSSSSSSSSSSSSSSSSXXXXXXXXXXXXXXXXXXXXXSSSSSSSSSSSSSSSSXXXXXXXXXXXXXXXXXXXXXSSSSSSSSSSSSSSSSXXXXXXXXXXXXXXXXXXXXXSSSSSSSSSSSSSSSSXXXXXXXXXXXXXXXXXXXXXSSSSSSSSSSSSSSSSXXXXXXXXXXXXXXXXXXXXXSSSSSSSSSSSSSSSSXXXXXXXXXXXXXXXXXXXXXSSSSSSSSSSSSSSSSXXXXXXXXXXXXXXXXXXXXX