续1009vue,jwt,redis，token,单点登录

小俊会编码

已于 2022-10-15 14:35:00 修改

阅读量426

点赞数

分类专栏：框架 Redis springboot 文章标签： redis java spring boot

于 2022-10-10 15:12:17 首次发布

本文链接：https://blog.csdn.net/qq_60555957/article/details/127237955

版权

框架同时被 3 个专栏收录

29 篇文章 1 订阅

订阅专栏

springboot

9 篇文章 0 订阅

订阅专栏

Redis

3 篇文章 0 订阅

订阅专栏

因为要用到Redis，所以我们要打开虚拟机，连接上Redis，可是当我用到secureCRT的时候连接虚拟机连接不上，那么解决办法

注意，配置文件当中，保护状态一定要关闭（编辑后，记得保存再退出）

要使用idea操作Redis

导入依赖

        <!--redis依赖-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-redis</artifactId>
        </dependency>

核心配置文件当中配置


spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.username=root
spring.datasource.password=123456
spring.datasource.url=jdbc:mysql://localhost:3306/vue0930?serverTimezone=UTC



#mybatis日志
mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl
#关闭驼峰命名法
mybatis-plus.configuration.map-underscore-to-camel-case=false
mybatis-plus.mapper-locations=classpath:mapper/*Mapper.xml
mybatis-plus.type-aliases-package=com.pro.domain

#Redis
spring.redis.port=6379
spring.redis.database=0
spring.redis.host=192.168.8.1

#端口号
server.port=9000
#项目的虚拟路径
server.servlet.context-path=/0930vue

然后测试是否连接成功

package com.pro.test;

import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.test.context.junit4.SpringRunner;

@RunWith(SpringRunner.class)
@SpringBootTest
public class ReTest {
    @Autowired
    private RedisTemplate redisTemplate;

    @Test
    public void testRedis(){
        redisTemplate.opsForValue().set("nana","fdd");
        Object nana = redisTemplate.opsForValue().get("nana");
        System.out.println(nana);
    }
}

通过可视化界面Redis DeskTop，发现我们已经写入成功

然后我们需要用到jwt

jwt概念

使用

导入jwt依赖

             <!--jwt-->
            <dependency>
                <groupId>io.jsonwebtoken</groupId>
                <artifactId>jjwt</artifactId>
                <version>0.9.1</version>
            </dependency>

key(盐值)小于四位会报错

package com.pro.test;

import io.jsonwebtoken.Claims;
import io.jsonwebtoken.Jwts;
import io.jsonwebtoken.SignatureAlgorithm;
import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.boot.test.context.SpringBootTest;
import org.springframework.test.context.junit4.SpringRunner;

import java.util.HashMap;
import java.util.Map;

@RunWith(SpringRunner.class)
@SpringBootTest
public class JwtTest {
    @Test
    public void testJwt(){
        String salt = "zyggg"; //盐值不能少于四位

        //自定义信息
        Map<String,Object> claims = new HashMap<>();
        claims.put("username","zygg");
        claims.put("password","ggyz");

        //生成token
        String token = Jwts.builder()
                .setClaims(claims)
                .signWith(SignatureAlgorithm.HS256,salt)
                .compact();
        System.out.println("token:"+token);

        System.out.println("token:"+token);
        System.out.println("--------------------");
        Claims claims1 = Jwts.parser()
                .setSigningKey(salt)  //盐值
                .parseClaimsJws(token)   //解析token
                .getBody();  //获取claims自定义部分
        System.out.println(claims1);
    }
}

测试好之后我们来写service

   /**
     * 根据token得到Redis的对象
     * @param token
     * @return
     */
    //比较前端传过来的token和Redis里面的token是否相同
    public boolean queryUserByToken(String token){
        //1.从Redis中取token
        String redisTokenKey = "token_"+token;
        String redisData = (String) redisTemplate.opsForValue().get(redisTokenKey);
        //如果没有，则表示没有登录或已经过期
        if(StringUtils.isEmpty(redisData)){
            return false;
        }
       /* try {*/
            //如果可以执行到这，则表示redis里面有，是登录用户
            //2.延长过期时间
            redisTemplate.expire(redisTokenKey,1, TimeUnit.HOURS);

            //3.这一步可以选择要不要，看是否需要从token中解析出用户信息
           /* ObjectMapper objectMapper = new ObjectMapper();
            return  objectMapper.readValue(redisData,User.class);*/
      /*  } catch (IOException e) {
            e.printStackTrace();
        }*/
        return true;
    }

controller：token我们用在登录的时候

生成token，加密，存放到Redis并设置过期时间

 @PostMapping("/login")
    public R login(@RequestBody User user){
        User loginUser = userService.login(user);
        Map map = new HashMap();
        try {
            if (loginUser != null){
                //只要登录成功，用户信息-jwt->token串-->发到前端保存
                Map<String,Object> claims = new HashMap<>();
                claims.put("username",user.getUsername());
                claims.put("password",user.getPassword());
                //生成token
                String token = Jwts.builder()
                        .setClaims(claims) //存自定义信息
                        .signWith(SignatureAlgorithm.HS256,secret)  //盐值
                        .compact();
                System.out.println("token:"+token);

                //将token放到Redis
                String redisTokenKey = "token_"+token;

                ObjectMapper objectMapper = new ObjectMapper();
                String tokenValue = objectMapper.writeValueAsString(loginUser);
                //把什么放到了Redis？ key-token  value:user
                redisTemplate.opsForValue().set(redisTokenKey,tokenValue, Duration.ofHours(1));//在Redis存活一个小时
                //每次访问后台时，都带上token

                //作为后端，是否要保存，所以我们可以把token放到Redis里面key-value

                //前端再来访问后端时，把放在头信息当中的token，组合一个key,再通过这个key去Redis里面去获取对应的value
                //如果这个key查出来的value为null，那说明这个用户没有登录
                //但是我们不希望Redis当中的key一直存活，所以我们需要给Redis设置存活时间
                //如果没操作，那就在存活时间过后就是未登陆状态
                //如果断断续续在操作，那么我们就延续存活时间
                map.put("loginUser",loginUser);
                map.put("token",token);
                return new R(200,"登陆成功",map);
            }
        } catch (Exception e) {
            e.printStackTrace();
            return new R(200,"失败");
        }
        return new R(300,"登陆失败");
    }

撒胡新左侧菜单栏，发请求过来时，截取请求头当中的token

package com.pro.controller;

import com.pro.domain.Permission;
import com.pro.domain.User;
import com.pro.service.PermissionService;
import com.pro.service.UserService;
import com.pro.util.R;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
//前后端分离跨域的注解
@CrossOrigin
public class PermissonController {
    @Autowired
    private RedisTemplate redisTemplate;

    @Autowired
    private PermissionService permissionService;

    @Autowired
    private UserService userService;

    @GetMapping("/menuPermission")
    public R menuPermission(@RequestHeader("Authorization")String token){
        //这个方法的目的：
        //比较前端传过来的token和后台Redis的token（Redis当中是否存在对应的token）
        //就可以判断是否登录过
       Boolean flag = userService.queryUserByToken(token);
        if(!flag){
            return new R(600,"未登录或待机时间超过一小时，请登录");
        }
        List<Permission> permissionList = permissionService.getPermis();
        if(permissionList != null & permissionList.size() != 0){
            return new R(200,"查询权限成功",permissionList);
        }
        return new R(300,"查询权限失败");
    }


}

token和redis 学习设置好之后，现在我们又回到前端
现在点击用户列表之后，我们使用“面包屑”
使用卡片，搜索框，列表来呈现，要记得去引用和注册

<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片视图区-->
    <el-card>
      <!--搜索区，gutter是栅格的间隔-->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-input placeholder="请输入内容">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary">添加用户</el-button>
        </el-col>
      </el-row>
      <!--数据列表-->
      <el-table :data="userList" border stripe><!--换行变色-->
        <el-table-column type="index"></el-table-column><!--可以自动在前面加一个编号-->
        <el-table-column label="编号" prop="userId"></el-table-column>
        <el-table-column label="用户" prop="username"></el-table-column>
        <el-table-column label="邮箱" prop="email"></el-table-column>
        <el-table-column label="电话" prop="mobile"></el-table-column>
        <el-table-column label="操作" align="center">
          <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
          <el-button type="warning" icon="el-icon-share" size="mini"></el-button>
          <el-tooltip effect="dark" content="Top Right 删除" placement="top-end" :enterable="false">
            <!--enterable:鼠标是否可以移入提示文本里-->
            <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
          </el-tooltip>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="queryWhere.rows"
        :current-page="queryWhere.page"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'Users',
  data () {
    return {
      // 分页查询用户列表的参数对象
      queryWhere: {
        query: '',
        page: 1,
        rows: 2
      },
      userList: [],
      total: 0
    }
  },
  created () {
    this.getUsers()
  },
  methods: {
    async getUsers () {
      /* 发请求到后台，得到用户列表 */
      const { data: res } = await this.$http.get('users', { params: this.queryWhere })
      console.log(res)
      if (res.code !== 200) {
        return this.$message.error(res.msg)
      }
      this.userList = res.data.records
      this.total = res.data.total
    }
  }
}
</script>

<style lang="less" scoped>

</style>