SpringBoot+Vue+Redis实现单点登录(一处登录另一处退出登录)

2023-08-05 00:35:04 180

一、需求

实现用户在浏览器登录后，跳转到其他页面，当用户在其它地方又登录时，前面用户登录的页面退出登录(列如qq挤号那种方式)

二、实现思路

用户在前端填写用户信息登录后，后台接收数据先去数据库进行判断，如果登录成功，创建map集合，以用户id为键，token为值，先通过当前登录用户的id去获取token，如果token存在说明该用户已经登录过，调用redis以token为键删除上个用户的信息，调用方法生成新token，并将token存入map集合，将用户信息存入redis，并将token存入cookie。当用户回到前面登录的页面时，刷新页面，调用方法，通过后端获取cookie的token值，通过token在redis中查询用户信息是否存在，如果不存在，前端通过返回值判断重新回到登录页面！

三、实现代码

后端：

1、创建SpringBoot项目，创建User表，由于是通过Vue编写的，所以是前后端分离，需要跨域，我这里编写了跨域配置类，还有redis的util类，返回的封装类，cookie的util类，文末有源码提供，可以自行提取。

2、yum配置文件

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")
publicclassUser{
@Id
@Column(name="id",unique=true,nullable=false)
privateintid;
@Column(name="username",nullable=false)
privateStringusername;
@Column(name="password",nullable=false)
privateStringpassword;
}

4、编写Dao，UserDao.class

publicinterfaceUserDaoextendsJpaRepository{
publicUserfindByUsernameAndPassword(Stringusername,Stringpassword);
}

5、编写serviceImpl,UserServiceImpl.class进行登录的业务逻辑处理

@Service
publicclassUserServiceImpl{
@Autowired
privateUserDaouserDao;
@Autowired
privateJedisDaojedisDao;
@Value("${REDIS_KEY}")//从配置文件中取值
privateStringKEY;
privateMapUserLogin=newHashMap<>();
/**
*登录
*@paramrequest
*@paramresponse
*@paramu
*@return
*/
publicUseruserlogin(HttpServletRequestrequest,HttpServletResponseresponse,Useru){
//查询登录是否成功
Useruser=userDao.findByUsernameAndPassword(u.getUsername(),u.getPassword());
//判断us是否为空
if(user==null){
returnnull;
}
//生成token
Stringtoken="user_"+UUID.randomUUID().toString();
//从map中获得redis中的key
StringoldToken=UserLogin.get(user.getId());
//判断map中是否存在该id
if(!StringUtils.isEmpty(oldToken)){
//删除redis中老的值
jedisDao.delValue(oldToken);
}
//将新的的key保存到map中
UserLogin.put(user.getId(),token);
//将信息存入redis
jedisDao.setValue(token,JsonUtils.objectToJson(user));
//将token放入cookie中
CookieUtils.setCookie(request,response,KEY,token,5*60,true);
returnuser;
}

/**
*判断是否登录
*@paramresponse
*@paramrequest
*@return
*/
publicStringgetUserByToken(HttpServletResponseresponse,HttpServletRequestrequest){
//从cookie中取出用户token
Stringtoken=CookieUtils.getCookieValue(request,KEY);
//从redis中取出用户信息
Stringuser=jedisDao.getValue(token);
returnuser;
}
}

6、编写controller，接收前端请求，返回数据

@RestController
publicclassLoginController{
@Autowired
privateUserServiceImpluserService;
/**
*登录
*@paramresponse
*@paramrequest
*@paramuser
*@parammodel
*@return
*/
@PostMapping("/login")
publicResponseResultLogin(HttpServletResponseresponse,HttpServletRequestrequest,@RequestBodyUseruser,Modelmodel){
ResponseResultresponseResult=newResponseResult();
try{
Useruser2=userService.userlogin(request,response,user);
if(user2!=null){
responseResult.setState(200);
responseResult.setMsg("登录成功！");
returnresponseResult;
}else{
responseResult.setState(202);
responseResult.setMsg("用户名或密码错误！");
returnresponseResult;
}
}catch(Exceptione){
responseResult.setState(500);
responseResult.setMsg("发生错误，登录失败！");
returnresponseResult;
}
}
/**
*判断是否登录
*@paramresponse
*@paramrequest
*@return
*@throwsException
*/
@GetMapping("/toLogin")
publicResponseResultgetUserInfo(HttpServletResponseresponse,HttpServletRequestrequest)throwsException{
ResponseResultresponseResult=newResponseResult();
try{
Stringtoken=userService.getUserByToken(response,request);
if(token!=null){
responseResult.setState(200);
responseResult.setMsg("登录中！");
returnresponseResult;
}else{
responseResult.setState(202);
responseResult.setMsg("在别处登录！");
returnresponseResult;
}
}catch(Exceptione){
response.setStatus(500);
responseResult.setMsg("发生错误！");
returnresponseResult;
}
}
}

Vue前端

1、创建Vue项目：vueinitwebpack项目名称
2、引入axios：npminstall--saveaxiosvue-axios
3、引入element：npmielement-ui-S
4、在src的main.js下配置

importaxiosfrom'axios'
importVueAxiosfrom'vue-axios'
//element-ui引入文件
importElementUIfrom'element-ui'
import'element-ui/lib/theme-chalk/index.css'
//注册VueAxios,axios
Vue.use(VueAxios,axios)
Vue.use(ElementUI)
//配置axios支持cookie
axios.defaults.withCredentials=true;

5、在src的components下创建login.vue,userinfo.vue,并在src的router下配置访问地址

importVuefrom'vue'
importRouterfrom'vue-router'
importloginfrom'@/components/login'
importUserInfofrom'@/components/userinfo'

Vue.use(Router)

exportdefaultnewRouter({
routes:[{
path:'/login',
component:login
},{
path:'/user_info',
component:UserInfo
}]

})

6、前端的代码这里就不贴出了，代码是有详细的注释，请自行下载代码查看

四、代码地址和演示效果

下线：

dome代码地址

链接:https://pan.baidu.com/s/1rXU46LCLpMxDzVEV_CpqFw

提取码:yquh

总结

以上所述是小编给大家介绍的SpringBoot+Vue+Redis实现单点登录(一处登录另一处退出登录)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

SpringBoot+Vue+Redis实现单点登录(一处登录另一处退出登录)

热门推荐

随机推荐