对于搭建nginx后前后端分离的用户信息存储问题对于搭建nginx后前后端分离的用户信息存储问题

177 阅读 0 评论 117 点赞

我是靠谱客的博主粗犷帆布鞋，这篇文章主要介绍对于搭建nginx后前后端分离的用户信息存储问题对于搭建nginx后前后端分离的用户信息存储问题，现在分享给大家，希望可以做个参考。

对于搭建nginx后前后端分离的用户信息存储问题

我们后端使用springboot技术、shiro、reids非关系型数据库、mysql关系型数据库和mybatis-plus

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 public CommonResult findByNameAndPassword(LoginVo loginVo) {
        QueryWrapper<User> wrapper=new QueryWrapper<>();
        wrapper.eq("username",loginVo.getLoginName());
        wrapper.eq("password",loginVo.getPassword());
        User user=userDao.selectOne(wrapper);
        if(user!=null) {
            //把用户的信息保存到redis中。
            //随机产生一个Key
            String key = UUID.randomUUID().toString().replace("-", "");
            redisTemplate.opsForValue().set(key,user,24, TimeUnit.HOURS);
            return new CommonResult(2000, "登陆成功", key);
        }else{
            return new CommonResult(5000, "登陆失败", null);
        }
    }

我们通过后台技术把用户信息存储到redis中，这样就可以保证用户信息的完整性，后续操作可以通过存储的key值进行存取用户信息，那么如何保证用户登录后的每次请求都可以带着此key值，让后台查询呢？

假如这是一个vue的登录axios请求，当请求到上面的后台后，后台返回key值后可以使用sessionStorage.setItem(“token”,resp.data.result)方法把返回的key存到消息头中，(“token”,resp.data.result)，然后就可在后台根据token作为key值，取到存放用户信息到reids时的key，继而取到用户的信息使用，

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//登陆方法
              login(){
                   var that=this;
                   this.$refs.loginFormRef.validate((valid) => {
                        if (valid) {
                             this.$http.post("http://localhost:8888/sys/login/login",this.loginFormData).then(function(resp){
                                  if(resp.data.code===2000){
                                       that.$message.success(resp.data.msg);
                                       //把用户的key保存起来. sessionStorage   | localStorage 本地
                                       sessionStorage.setItem("token",resp.data.result)
                                       that.$router.push("/home")
                                  }else{
                                       that.$message.error(resp.data.msg);
                                  }
                             })
                        }
                   });

在main.js中配置请求拦截器

复制代码

1
2
3
4
5
6
7
8
9
axios.interceptors.request.use(config=>{
  var token = sessionStorage.getItem("token");
  if(token){
    //如果token不为空，就把token带到每个请求的请求头上
    config.headers.token=token;
  }
  return config;
})

在后台可以通过request对象取到token的值

复制代码

1
2
3
 HttpServletRequest req= (HttpServletRequest) request;//多态  向下转型
String token = req.getHeader("token");

路由守卫

通过设置登录后信息存放在以后每次消息的消息头中
我们可以通过路有守卫来拦截未登录直接在地址栏上访问页面的现象。
在
在这里插入图片描述

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//设置路由守卫
//to:路由跳转的路径
//from: 从哪跳转来的。
//next():执行
router.beforeEach((to,from,next)=>{
  var path = to.path;
  if(path=="/login"){//如果跳转路径为login路径则放行
    return next();
  }
  var token =sessionStorage.getItem("token");
  if(token){
    return  next();//已经登陆则放行放行
  }
return next("/login")//未登录跳转到login页面
})