【畅购商城】用户注册以及整合JWT

1. 1. 用户注册
      1. 接口

POST http://localhost:10010/web-service/user/register

{

"mobile":"13612345677",

"password":"1234",

"username":"jack3",

"code":"3919"

}

1. 1. 1. 后端
2. 保存前需要再次进行服务端校验
   1. 用户名是否注册
   2. 手机号是否注册
   3. 验证码是否失效
   4. 验证码是否错误
3. 密码需要使用 BCrypt进行加密
4. 步骤一：修改UserService接口，添加register方法

/**

 * 用户注册

* @param user

* @return

*/

public boolean register(User user) ;

1. 步骤二：完善UserServiceImpl实现类

@Override

public boolean register(User user) {

//密码加密

String newPassword = BCrypt.hashpw(user.getPassword());

    user.setPassword(newPassword);

//处理数据

user.setCreatedAt(new Date());

    user.setUpdatedAt(user.getCreatedAt());

int insert = baseMapper.insert(user);

return insert == 1;

}

1. 步骤三：修改UserController，添加register方法

/**

 * 用户注册

* @param user

* @return

*/

@PostMapping("/register")

public BaseResult  register(@RequestBody User user){

//服务端校验

User findUser = userService.findByUsername(user.getUsername());

if(findUser != null) {

return BaseResult.error("用户名已经存在");

    }

    findUser = userService.findByMobile(user.getMobile());

if(findUser != null) {

return BaseResult.error("电话号码已经存在");

    }

//验证码

String code = stringRedisTemplate.opsForValue().get("sms_register" + user.getMobile());

//删除redis中的验证码

stringRedisTemplate.delete("sms_register" + user.getMobile());

if(code == null) {

return BaseResult.error("验证码失效");

    }

if(!code.equals(user.getCode())) {

return BaseResult.error("验证码不正确");

    }

//注册

boolean register = userService.register(user);

if(register) {

return BaseResult.ok("注册成功");

    }

return BaseResult.error("注册失败");

}

1. 1. 1. 日期处理（可选）
2. 编写 DateMetaObjectHandler 用于处理“创建时间”和“修改日期”

package com.czxy.changgou4.handler;

import com.baomidou.mybatisplus.core.handlers.MetaObjectHandler;

import org.apache.ibatis.reflection.MetaObject;

import org.springframework.stereotype.Component;

import java.util.Date;

/**

 * @author 桐叔

* @email liangtong@itcast.cn

 */

@Component

public class DateMetaObjectHandler implements MetaObjectHandler {

@Override

public void insertFill(MetaObject metaObject) {

this.setFieldValByName("createdAt", new Date(), metaObject);

this.setFieldValByName("updatedAt", new Date(), metaObject);

    }

@Override

public void updateFill(MetaObject metaObject) {

this.setFieldValByName("updatedAt", new Date(), metaObject);

    }

}

1. 完善User JavaBean，设置填充方式

@TableField(value="created_at",fill = FieldFill.INSERT)

private Date createdAt;

@TableField(value="updated_at",fill = FieldFill.INSERT_UPDATE)

private Date updatedAt;

1. 1. 1. 前端
2. 步骤一：修改 api.js ，添加注册函数

//注册

  register : ( user )=> {

return axios.post('/web-service/user/register', user )

  }

1. 步骤二：处理表单，验证码input绑定数据，提交按钮绑定事件

<li class="checkcode">

<label for="">验证码：</label>

<input type="text" name="checkcode" v-model="user.code" />

<button  :disabled="btnDisabled" @click.prevent="sendSmsFn" >

                发送验证码<span v-show="btnDisabled">{{seconds}}秒</span>

</button>

<p :class="userMsg.smsData.code == 1 ? 'success' : 'error'">{{userMsg.smsData.message}} </p>

</li>

<li>

<label for=""> </label>

<input type="checkbox" class="chb" checked="checked" /> 我已阅读并同意《用户注册协议》

</li>

<li>

<label for=""> </label>

<input type="submit" value="" @click.prevent="registerFn" class="login_btn" />

</li>

1. 步骤三：完善data区域的user数据

      user : {  //表单封装数据

        username : "",          //用户名

        mobile : "13699282444", //手机号

        password : "",          //密码

        code : "" //验证码

      },

1. 步骤四：编写registerFn函数

async registerFn() {

let { data } = await this.$request.register( this.user )

if( data.code == 20000) {

//成功

this.$router.push('/login')

      } else {

//失败--与发送验证码使用一个位置显示错误信息

this.userMsg.smsData = data

      }

    }

1. 1. 整合JWT
      1. 整合分析

1. 生成token：在用户登录成功，根据用户的登录信息，生成登录标识token，并返回给浏览器。
2. 使用token：完善ajax请求，在请求之前添加请求头，设置token
3. 校验token：在网关中编写过滤器，进行请求进行拦截，并校验token。
4. 白名单：在白名单中的请求，是不需要token可以直接访问的。
   1. 1. 生成Token
5. 用户登录成功，生成token，并将token响应给浏览器。（认证服务 AuthService）
6. 步骤一：查看 application.yml文件，确定 jwt配置信息

1. 步骤二：创建JwtProperties文件，用于加载sc.jwt配置信息

package com.czxy.changgou4.config;

import com.czxy.changgou4.utils.RsaUtils;

import lombok.Data;

import org.slf4j.Logger;

import org.slf4j.LoggerFactory;

import org.springframework.boot.context.properties.ConfigurationProperties;

import org.springframework.stereotype.Component;

import javax.annotation.PostConstruct;

import java.io.File;

import java.security.PrivateKey;

import java.security.PublicKey;

/**

 * @author 桐叔

* @email liangtong@itcast.cn

 */

@Data

@ConfigurationProperties(prefix = "sc.jwt")

@Component

public class JwtProperties {

private String secret; // 密钥

private String pubKeyPath;// 公钥

private String priKeyPath;// 私钥

private int expire;// token过期时间

private PublicKey publicKey; // 公钥

private PrivateKey privateKey; // 私钥

private static final Logger logger = LoggerFactory.getLogger(JwtProperties.class);

@PostConstruct

public void init(){

try {

            File pubFile = new File(this.pubKeyPath);

            File priFile = new File(this.priKeyPath);

if( !pubFile.exists() || !priFile.exists()){

                RsaUtils.generateKey( this.pubKeyPath ,this.priKeyPath , this.secret);

            }

this.publicKey = RsaUtils.getPublicKey( this.pubKeyPath );

this.privateKey = RsaUtils.getPrivateKey( this.priKeyPath );

        } catch (Exception e) {

throw new RuntimeException(e.getMessage());

        }

    }

}

1. 步骤三：修改AuthController，注入JwtProperties，并使用JwtUtils生成token

package com.czxy.changgou4.controller;

/**

 * @author 桐叔

* @email liangtong@itcast.cn

 */

import com.czxy.changgou4.config.JwtProperties;

import com.czxy.changgou4.domain.AuthUser;

import com.czxy.changgou4.service.AuthService;

import com.czxy.changgou4.utils.JwtUtils;

import com.czxy.changgou4.vo.BaseResult;

import org.springframework.data.redis.core.StringRedisTemplate;

import org.springframework.web.bind.annotation.PostMapping;

import org.springframework.web.bind.annotation.RequestBody;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RestController;

import javax.annotation.Resource;

/**

 * Created by liangtong.

 */

@RestController

@RequestMapping("/auth")

public class AuthController {

@Resource

private AuthService authService;

@Resource

private StringRedisTemplate stringRedisTemplate;

@Resource

private JwtProperties jwtProperties;

@PostMapping("/login")

public BaseResult login(@RequestBody AuthUser user){

//校验验证码--使用后删除

String redisCode = stringRedisTemplate.opsForValue().get( "login" + user.getUsername() );

stringRedisTemplate.delete( "login" + user.getUsername() );

if(redisCode == null) {

return BaseResult.error("验证码无效");

        }

if(! redisCode.equalsIgnoreCase(user.getCode())) {

return BaseResult.error("验证码错误");

        }

//登录

AuthUser loginUser = authService.login(user);

if(loginUser != null ) {

//生成Token

String token = JwtUtils.generateToken(loginUser, jwtProperties.getExpire(), jwtProperties.getPrivateKey());

return BaseResult.ok("登录成功").append("loginUser",loginUser).append("token", token);

        } else {

return BaseResult.error("用户名或密码不匹配");

        }

    }

}

1. 1. 1. 使用token
2. 步骤一：登录成功后保存token，修改 Login.vue页面

async loginFn() {

let { data } = await this.$request.login( this.user )

if( data.code == 20000) {

//成功

        sessionStorage.setItem('user' , JSON.stringify(data.other.loginUser) )

//保存token

        sessionStorage.setItem('token' , data.other.token )

//跳转到首页

this.$router.push('/')

      } else {

this.errorMsg = data.message

      }

    }

1. 步骤二：请求是自动携带token，修改apiclient.js，将token添加到请求头

//参考 https://axios.nuxtjs.org/helpers

let token = sessionStorage.getItem('token')

if( token ) {

// Adds header: `Authorization: 123` to all requests

// this.$axios.setToken('123')

    $axios.setToken( token )

  }

1. 步骤三：检查 nuxt.conf.js，插件模式改成“client”
   1. 否则抛异常“sessionStorage is not defined”

  plugins: [

    { src: '~plugins/apiclient.js', mode: 'client' }

  ],

1. 1. 1. 校验token
2. token的校验在网关项目处完成
3. 步骤一：修改application.yml添加jwt配置

#自定义内容

sc:

  jwt:

    secret: sc@Login(Auth}*^31)&czxy% # 登录校验的密钥

pubKeyPath: D:/rsa/rsa.pub # 公钥地址

priKeyPath: D:/rsa/rsa.pri # 私钥地址

expire: 360 # 过期时间,单位分钟

1. 步骤二：创建 JwtProperties，用于加载配置文件

package com.czxy.changgou4.config;

import com.czxy.changgou4.utils.RsaUtils;

import lombok.Data;

import org.slf4j.Logger;

import org.slf4j.LoggerFactory;

import org.springframework.boot.context.properties.ConfigurationProperties;

import org.springframework.stereotype.Component;

import javax.annotation.PostConstruct;

import java.io.File;

import java.security.PrivateKey;

import java.security.PublicKey;

/**

 * @author 桐叔

* @email liangtong@itcast.cn

 */

@Data

@ConfigurationProperties(prefix = "sc.jwt")

public class JwtProperties {

private String secret; // 密钥

private String pubKeyPath;// 公钥

private String priKeyPath;// 私钥

private int expire;// token过期时间

private PublicKey publicKey; // 公钥

private PrivateKey privateKey; // 私钥

private static final Logger logger = LoggerFactory.getLogger(JwtProperties.class);

@PostConstruct

public void init(){

try {

            File pubFile = new File(this.pubKeyPath);

            File priFile = new File(this.priKeyPath);

if( !pubFile.exists() || !priFile.exists()){

                RsaUtils.generateKey( this.pubKeyPath ,this.priKeyPath , this.secret);

            }

this.publicKey = RsaUtils.getPublicKey( this.pubKeyPath );

this.privateKey = RsaUtils.getPrivateKey( this.priKeyPath );

        } catch (Exception e) {

throw new RuntimeException(e.getMessage());

        }

    }

}

1. 步骤三：编写过滤器，对所有路径进行拦截

package com.czxy.changgou4.filter;

import com.czxy.changgou4.config.FilterProperties;

import com.czxy.changgou4.config.JwtProperties;

import com.czxy.changgou4.pojo.User;

import com.czxy.changgou4.utils.JwtUtils;

import com.czxy.changgou4.utils.RsaUtils;

import org.springframework.boot.context.properties.EnableConfigurationProperties;

import org.springframework.cloud.gateway.filter.GatewayFilterChain;

import org.springframework.cloud.gateway.filter.GlobalFilter;

import org.springframework.core.Ordered;

import org.springframework.core.io.buffer.DataBuffer;

import org.springframework.http.HttpStatus;

import org.springframework.http.server.reactive.ServerHttpRequest;

import org.springframework.http.server.reactive.ServerHttpResponse;

import org.springframework.stereotype.Component;

import org.springframework.web.server.ServerWebExchange;

import reactor.core.publisher.Flux;

import reactor.core.publisher.Mono;

import javax.annotation.Resource;

import java.nio.charset.StandardCharsets;

/**

 * @author 桐叔

* @email liangtong@itcast.cn

 */

@Component

public class LoginFilter implements GlobalFilter, Ordered {

@Resource

private JwtProperties jwtProperties;

@Override

public Mono<Void> filter(ServerWebExchange exchange, GatewayFilterChain chain) {

//1 获得请求路径

ServerHttpRequest request = exchange.getRequest();

        String path = request.getURI().getPath();

        System.out.println(path);

//2 白名单放行

//3 获得token

String token = request.getHeaders().getFirst("Authorization");

//4 校验token

try {

            JwtUtils.getObjectFromToken(token, RsaUtils.getPublicKey(jwtProperties.getPubKeyPath()), User.class);

return chain.filter(exchange);

        } catch (Exception e) {

            ServerHttpResponse response = exchange.getResponse();

            response.setStatusCode(HttpStatus.UNAUTHORIZED);

            response.getHeaders().add("Content-Type","application/json;charset=UTF-8");

            DataBuffer wrap = response.bufferFactory().wrap("没有权限".getBytes(StandardCharsets.UTF_8));

return exchange.getResponse().writeWith(Flux.just(wrap));

        }

    }

@Override

public int getOrder() {

return 1;

    }

}

1. 步骤四：修改前端 apiclient.js 文件，用于处理401异常

//处理响应异常

  $axios.onError(error => {

// token失效，服务器响应401

if(error.response.status === 401) {

      console.error(error.response.data)

      redirect('/login')

    }

  })

1. api.js 完整代码

var axios = null

export default ({ $axios, redirect, process }, inject) => {

//参考 https://axios.nuxtjs.org/helpers

let token = sessionStorage.getItem('token')

if( token ) {

// Adds header: `Authorization: 123` to all requests

// this.$axios.setToken('123')

    $axios.setToken( token )

  }

//处理响应异常

  $axios.onError(error => {

// token失效，服务器响应401

if(error.response.status === 401) {

      console.error(error.response.data)

      redirect('/login')

    }

  })

//赋值

  axios = $axios

//4) 将自定义函数交于nuxt

// 使用方式1：在vue中，this.$request.xxx()

// 使用方式2：在nuxt的asyncData中，content.app.$request.xxx()

  inject('request', request)

}

1. 1. 1. 白名单
2. 不需要拦截的资源都配置到yml文件中，在过滤器直接放行
3. 步骤一：修改application.yml文件

#自定义内容

sc:

  jwt:

    secret: sc@Login(Auth}*^31)&czxy% # 登录校验的密钥

pubKeyPath: D:/rsa/rsa.pub # 公钥地址

priKeyPath: D:/rsa/rsa.pri # 私钥地址

expire: 360 # 过期时间,单位分钟

filter:

    allowPaths:

- /checkusername

      - /checkmobile

      - /sms

      - /register

      - /login

 - /verifycode

      - /categorys

      - /news

      - /brands

      - /specifications

      - /search

      - /goods

      - /comments

- swagger

 - /api-docs

1. 步骤二：创建FilterProperties配置文件，用于存放允许放行的路径

package com.czxy.changgou4.config;

import lombok.Data;

import org.springframework.boot.context.properties.ConfigurationProperties;

import java.util.List;

/**

 * @author 桐叔

* @email liangtong@itcast.cn

 */

@Data

@ConfigurationProperties(prefix="sc.filter")

public class FilterProperties {

//允许访问路径集合

private List<String> allowPaths;

}

1. 步骤三：修改 LoginFilter，放行名单中配置的路径

package com.czxy.changgou4.filter;

import com.czxy.changgou4.config.FilterProperties;

import com.czxy.changgou4.config.JwtProperties;

import com.czxy.changgou4.pojo.User;

import com.czxy.changgou4.utils.JwtUtils;

import com.czxy.changgou4.utils.RsaUtils;

import org.springframework.boot.context.properties.EnableConfigurationProperties;

import org.springframework.cloud.gateway.filter.GatewayFilterChain;

import org.springframework.cloud.gateway.filter.GlobalFilter;

import org.springframework.core.Ordered;

import org.springframework.core.io.buffer.DataBuffer;

import org.springframework.http.HttpStatus;

import org.springframework.http.server.reactive.ServerHttpRequest;

import org.springframework.http.server.reactive.ServerHttpResponse;

import org.springframework.stereotype.Component;

import org.springframework.web.server.ServerWebExchange;

import reactor.core.publisher.Flux;

import reactor.core.publisher.Mono;

import javax.annotation.Resource;

import java.nio.charset.StandardCharsets;

/**

 * @author 桐叔

* @email liangtong@itcast.cn

 */

@Component

//2.1 加载JWT配置类

@EnableConfigurationProperties({FilterProperties.class} )       //加载配置类

public class LoginFilter implements GlobalFilter, Ordered {

@Resource

private FilterProperties filterProperties;

@Resource

private JwtProperties jwtProperties;

@Override

public Mono<Void> filter(ServerWebExchange exchange, GatewayFilterChain chain) {

//1 获得请求路径

ServerHttpRequest request = exchange.getRequest();

        String path = request.getURI().getPath();

        System.out.println(path);

//2 白名单放行

for (String allowPath  : filterProperties.getAllowPaths()) {

//判断包含

if(path.contains(allowPath)){

return chain.filter(exchange);

            }

        }

//3 获得token

String token = request.getHeaders().getFirst("Authorization");

//4 校验token

try {

            JwtUtils.getObjectFromToken(token, RsaUtils.getPublicKey(jwtProperties.getPubKeyPath()), User.class);

return chain.filter(exchange);

        } catch (Exception e) {

            ServerHttpResponse response = exchange.getResponse();

            response.setStatusCode(HttpStatus.UNAUTHORIZED);

            response.getHeaders().add("Content-Type","application/json;charset=UTF-8");

            DataBuffer wrap = response.bufferFactory().wrap("没有权限".getBytes(StandardCharsets.UTF_8));

return exchange.getResponse().writeWith(Flux.just(wrap));

        }

    }

@Override

public int getOrder() {

return 1;

    }

}