- 首先需要明白Jwt是什么
- 这里有个大佬详细介绍如何使用
- <<密码加密与微服务鉴权JWT详细使用教程>>
- 【Vue|Vue整合JWT实现用户登录----权限校验】我们只使用这个工具进行功能实现
- 流程图
文章图片
- 步骤详解
- 功能一 : 登录成功后使用jwt生成随机码,并传递给浏览器(token)
- 功能二 : 浏览器判断登录成功后,把token保存到sessionStorage中(会话级别)
- 功能三 : 在每次发送http请求时都加上一个请求头Authorization___请求拦截器
- 功能四 : zuul过滤器中进行拦截判断
- 判断是否访问登录服务
- 进行token校验
- 功能五 : 使用响应拦截器进行拦截判断状态码,跳转login页面
- 步骤实现
- 功能一 : 登录成功后使用jwt生成随机码,并传递给浏览器(token)
文章图片
package com.czxy.service.impl; import com.czxy.domain.User; import com.czxy.mapper.UserMapper; import com.czxy.service.UserService; import com.czxy.utils.JwtUtils; import com.czxy.utils.RasUtils; import com.czxy.vo.BaseResult; import org.springframework.stereotype.Service; import org.springframework.transaction.annotation.Transactional; import tk.mybatis.mapper.entity.Example; import javax.annotation.Resource; /** * @Author Pole丶逐 * @Date 2019/12/21 10:36 * @E-mail */ @Service @Transactional public class UserServiceImpl implements UserService { @Resource private UserMapper userMapper; @Override public BaseResult login(User user) throws Exception { Example example = new Example(User.class); Example.Criteria c = example.createCriteria(); c.andEqualTo("userName",user.getUserName()); c.andEqualTo("password",user.getPassword()); User loginUser = userMapper.selectOneByExample(example); if (loginUser == null){ return BaseResult.error("用户名或密码错误"); } //Jwt生成随机码 String token = JwtUtils.generateToken(loginUser, 30, RasUtils.getPrivateKey(RasUtils.priKeyPath)); return BaseResult.ok("登录成功").append("token",token); } }
- 功能二 : 浏览器判断登录成功后,把token保存到sessionStorage中(会话级别)
文章图片
- 功能三 : 在每次发送http请求时都加上一个请求头Authorization___请求拦截器(api.js)
文章图片
//请求拦截器,加入请求头 axios.interceptors.request.use(request => { // Do something before request is sent let token = sessionStorage.getItem('token') if (token) { request.headers.Authorization = token } return request; }, error => { // Do something with request error return Promise.reject(error); });
- 功能四 : zuul过滤器中进行拦截判断
- 判断是否访问登录服务
文章图片
- 进行token校验
文章图片
package com.czxy.filter; import com.czxy.domain.User; import com.czxy.utils.JwtUtils; import com.czxy.utils.RasUtils; import com.netflix.zuul.ZuulFilter; import com.netflix.zuul.context.RequestContext; import com.netflix.zuul.exception.ZuulException; import org.springframework.stereotype.Component; import javax.servlet.http.HttpServletRequest; /** * @Author Pole丶逐 * @Date 2019/12/22 13:21 * @E-mail */ @Component public class LoginFilter extends ZuulFilter { @Override public String filterType() { return "pre"; }@Override public int filterOrder() { return 1; }@Override public boolean shouldFilter() { RequestContext requestContext = RequestContext.getCurrentContext(); HttpServletRequest request = requestContext.getRequest(); String uri = request.getRequestURI(); System.out.println(uri); if (uri.equals("/xma/client/user/login")){ return false; } return true; }@Override public Object run() throws ZuulException { RequestContext requestContext = RequestContext.getCurrentContext(); HttpServletRequest request = requestContext.getRequest(); String token = request.getHeader("Authorization"); try { JwtUtils.getObjectFromToken(token, RasUtils.getPublicKey(RasUtils.pubKeyPath), User.class); } catch (Exception e) { requestContext.setSendZuulResponse(false); requestContext.setResponseStatusCode(403); } return null; } }
- 判断是否访问登录服务
- 功能五 : 使用响应拦截器进行拦截判断状态码,跳转login页面(api.js)
文章图片
//必须先进行router的导入,否则无法进行跳转 import router from './router'//响应拦截器,判断状态码 axios.interceptors.response.use(response => { // Do something before response is sent return response; }, error => { // Do something with response error if(error.response.status == 403){ router.push('/login') } return Promise.reject(error); });
- 功能一 : 登录成功后使用jwt生成随机码,并传递给浏览器(token)
推荐阅读
- springboot|基于SpringBoot的汽车租赁管理系统
- Vue|Vue源码 深入响应式原理（一） 响应式对象
- golang|九、Golang网络编程（Go HTTP客户端服务器学习与开发）
- go处理文件上传
- go预防跨站脚本
- 前端|Vue 前后端交互 （axios async/await ）
- vue|超级详细的Vue-cli3使用教程
- vue中mixin混入和vuex状态管理相比较
- 软件研发|web移动端基础事件总结与应用