今天就跟大家聊聊有关SpringBoot中怎么利用Vue和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: trueserver: port: 8888REDIS_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> { public User findByUsernameAndPassword(String username, String password);}
5、编写serviceImpl,UserServiceImpl.class进行登录的业务逻辑处理
@Servicepublic class UserServiceImpl{ @Autowired private UserDao userDao; @Autowired private JedisDao jedisDao; @Value("${REDIS_KEY}") //从配置文件中取值 private String KEY; private Map<Integer,String> UserLogin = new HashMap<>(); /** * 登录 * @param request * @param response * @param u * @return */ public User userlogin(HttpServletRequest request, HttpServletResponse response, User u){ //查询登录是否成功 User user=userDao.findByUsernameAndPassword(u.getUsername(),u.getPassword()); //判断us是否为空 if(user==null){ return null; } //生成token String token="user_"+ UUID.randomUUID().toString(); //从map中获得redis中的key String oldToken = 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); return user; } /** * 判断是否登录 * @param response * @param request * @return */ public String getUserByToken(HttpServletResponse response, HttpServletRequest request) { //从cookie中取出用户token String token=CookieUtils.getCookieValue(request,KEY); //从redis中取出用户信息 String user= jedisDao.getValue(token); return user; }}
6、编写controller,接收前端请求,返回数据
@RestControllerpublic class LoginController { @Autowired private UserServiceImpl userService; /** * 登录 * @param response * @param request * @param user * @param model * @return */ @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; } } /** * 判断是否登录 * @param response * @param request * @return * @throws Exception */ @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-axios3、引入element:npm i element-ui -S4、在src的main.js下配置
import axios from 'axios'import VueAxios from 'vue-axios'// element-ui 引入文件import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'//注册 VueAxios, axiosVue.use(VueAxios, axios)Vue.use(ElementUI)//配置axios支持cookieaxios.defaults.withCredentials = true;
5、在src的components下创建login.vue,userinfo.vue,并在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实现单点登录功能有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联行业资讯频道,感谢大家的支持。
文章题目:SpringBoot中怎么利用Vue和Redis实现单点登录功能
当前路径:https://www.cdcxhl.com/article32/jgpdsc.html
成都网站建设公司_创新互联,为您提供面包屑导航、动态网站、App开发、网页设计公司、Google、品牌网站建设
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联