SpringBoot中怎么利用Vue和Redis实现单点登录功能

SpringBoot中怎么利用Vue和Redis实现单点登录功能

本文将详细介绍如何在SpringBoot中利用Vue和Redis实现单点登录功能。通过本文，你将了解如何配置Redis、编写实体类、Dao、ServiceImpl和Controller，以及Vue前端的配置和路由设置。

1. 创建SpringBoot项目

创建SpringBoot项目时，需要创建User表。由于使用Vue进行前端开发，因此采用前后端分离的架构，需要进行跨域配置。此外，还需要编写Redis的工具类、返回的封装类以及Cookie的工具类。文末将提供源码下载链接。

2. Redis配置文件

在application.yml中配置Redis连接信息：

spring:
  redis:
    database: 0 # Redis的默认数据库为0
    host: 127.0.0.1 # 链接Redis的IP
    port: 6379 # 链接Redis的端口号
    password: # 链接Redis的密码，默认为空
    jedis:
      pool:
        max-total: 200 # 链接Redis的总数目
        max-active: 100 # 链接Redis的最大数量
        max-idle: 8 # 最大的空闲链接数量
        min-idle: 5 # 最小的空闲链接数量
  datasource:
    url: jdbc:mysql://127.0.0.1:3306/test?useUnicode=true
    username: root
    password: root
    driver-class-name: com.mysql.jdbc.Driver
  jpa:
    show-sql: true
server:
  port: 8888
REDIS_KEY: USER_TOKEN

3. 编写实体类 User.class

@Data
@Entity
@Table(name = "user")
public class User {
    @Id
    @Column(name = "id", unique = true, nullable = false)
    private int id;
    @Column(name = "username", nullable = false)
    private String username;
    @Column(name = "password", nullable = false)
    private String password;
}

4. 编写Dao UserDao.class

public interface UserDao extends JpaRepository<User, Integer> {
    User findByUsernameAndPassword(String username, String password);
}

5. 编写ServiceImpl UserServiceImpl.class

@Service
public class UserServiceImpl {
    @Autowired
    private UserDao userDao;
    @Autowired
    private JedisDao jedisDao;
    @Value("${REDIS_KEY}")
    private String KEY;
    private Map<Integer, String> UserLogin = new HashMap<>();

    public User userlogin(HttpServletRequest request, HttpServletResponse response, User u) {
        User user = userDao.findByUsernameAndPassword(u.getUsername(), u.getPassword());
        if (user == null) {
            return null;
        }
        String token = "user_" + UUID.randomUUID().toString();
        String oldToken = UserLogin.get(user.getId());
        if (!StringUtils.isEmpty(oldToken)) {
            jedisDao.delValue(oldToken);
        }
        UserLogin.put(user.getId(), token);
        jedisDao.setValue(token, JsonUtils.objectToJson(user));
        CookieUtils.setCookie(request, response, KEY, token, 5 * 60, true);
        return user;
    }

    public String getUserByToken(HttpServletResponse response, HttpServletRequest request) {
        String token = CookieUtils.getCookieValue(request, KEY);
        String user = jedisDao.getValue(token);
        return user;
    }
}

6. 编写Controller LoginController.class

@RestController
public class LoginController {
    @Autowired
    private UserServiceImpl userService;

    @PostMapping("/login")
    public ResponseResult Login(HttpServletResponse response, HttpServletRequest request, @RequestBody User user, Model model) {
        ResponseResult responseResult = new ResponseResult();
        try {
            User user2 = userService.userlogin(request, response, user);
            if (user2 != null) {
                responseResult.setState(200);
                responseResult.setMsg("登录成功！");
                return responseResult;
            } else {
                responseResult.setState(202);
                responseResult.setMsg("用户名或密码错误！");
                return responseResult;
            }
        } catch (Exception e) {
            responseResult.setState(500);
            responseResult.setMsg("发生错误，登录失败！");
            return responseResult;
        }
    }

    @GetMapping("/toLogin")
    public ResponseResult getUserInfo(HttpServletResponse response, HttpServletRequest request) throws Exception {
        ResponseResult responseResult = new ResponseResult();
        try {
            String token = userService.getUserByToken(response, request);
            if (token != null) {
                responseResult.setState(200);
                responseResult.setMsg("登录中！");
                return responseResult;
            } else {
                responseResult.setState(202);
                responseResult.setMsg("在别处登录！");
                return responseResult;
            }
        } catch (Exception e) {
            response.setStatus(500);
            responseResult.setMsg("发生错误！");
            return responseResult;
        }
    }
}

Vue前端配置

1. 创建Vue项目：vue init webpack 项目名称
2. 引入axios：npm install --save axios vue-axios
3. 引入element：npm i element-ui -S

在src/main.js中配置：

import axios from 'axios'
import VueAxios from 'vue-axios'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(VueAxios, axios)
Vue.use(ElementUI)

axios.defaults.withCredentials = true;

在src/router下配置路由：

import Vue from 'vue'
import Router from 'vue-router'
import login from '@/components/login'
import UserInfo from '@/components/userinfo'

Vue.use(Router)

export default new Router({
  routes: [
    { path: '/login', component: login },
    { path: '/user_info', component: UserInfo }
  ]
})

通过以上步骤，你就可以在SpringBoot中利用Vue和Redis实现单点登录功能了。如果还想了解更多相关知识，可以关注创新互联行业资讯频道。