前后端完全分离实现登录和退出

已于 2024-08-01 20:45:41 修改
阅读量703 收藏 5
点赞数 5
文章标签： javascript 开发语言
于 2024-08-01 19:56:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_59099003/article/details/140855993
版权

前后端分离的整合

使用springsecurity+前端项目+redis完成认证授权的代码

1. 搭建一个前端工程

使用 vue ui搭建，使用webstrom操作

2. 创建一个登录页面

<template>
  <div class="login_container">
    <!-- 登录盒子  -->
    <div class="login_box">
      <!-- 头像 -->
      <div class="avatar_box">
        <img src="../assets/3.jpg" alt="">
      </div>
      <!-- 登录表单 -->
      <el-form :model="loginForm" ref="LoginFormRef"  label-width="0px" class="login_form">
        <!-- 用户名 -->
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" prefix-icon="el-icon-user-solid" ></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input type="password" v-model="loginForm.password" prefix-icon="el-icon-s-grid"></el-input>
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item class="btns">
          <el-button type="primary" >登录</el-button>
          <el-button type="info">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  name: "Login",
  data() {
    return {
      //数据绑定
      loginForm: {
        username: '张三',
        password: '123456'
      },

    }
  },
  methods:{

  }
}
</script>

<style  scoped>
.login_container {
  background-color: #2b5b6b;
  height: 100%;
}
.login_box {
  width: 450px;
  height: 300px;
  background: #fff;
  border: 1px solid #42b983;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

}
.login_box>.avatar_box {
  height: 130px;
  width: 130px;
  border: 1px solid #eee;
  border-radius: 50%;
  padding: 10px;
  box-shadow: 0 0 10px #ddd;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;

}
.login_box>.avatar_box>img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #eee;
}
.login_form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}
.btns {
  display: flex;
  justify-content: flex-end;
}
</style>

  1. 在views中创建视图——登录页面

  2. 在router的index.js中配置路由

{
    path: '/',
    name: 'home',
    //重定向，使之打开页面就跳转到登录页面
    redirect: '/login',
  },
    //配置登录页面的路由
  {
    path: '/login',
    name:'login',
    component: () => import('../views/Login.vue'),
  },
  1. 在App.vue默认组件中进行路由渲染
<template>
  <div id="app">
   <router-view/>
  </div>
</template>

3. 登录按钮的点击事件

1. 首先，需要在main.js全局配置中全局配置axios

  1. 导入axios
  2. 设置axios的基础路径：端口号为后端项目的端口号
  3. 将axios挂载到vue对象中
import axios form 'axios'//导入
axios.dafaults.baseURL="基础路径http://ip:端口号" //配置axios的基础路径，便于在进行axios请求时将其省略
Vue.prototype.$名称=axios//将axios挂载到vue对象中。axios要与导入时的import后的名称一致。

2. 然后，在login页面的登录页面添加点击事件

  1. 在loginForm表单中添加表单验证——>:rules关键字和ref
  2. 在data中添加表单验证的规则
  3. 实现点击事件

  • 表单验证

    在这里插入图片描述

  • 验证规则

    在这里插入图片描述

  • 登录点击事件

    myLogin(){
      this.$refs.LoginFormRef.validate(valid => {
        if(valid){
          this.$axios.post('/login?username='+this.loginForm.username+'&password='+this.loginForm.password).then(res=>{
            if(res.data.code == 200){
              this.$message.success("登录成功")
              //将token保存到sessionStorage，类似于cookie
                sessionStorage.setItem("token",res.data.data)
              //跳转到后台
              this.$router.push("/home")
            }else{
              this.$message.error("登录失败")
            }
          })
        }
      })
    }

在该请求中，将获取到的token存放到sessionStorage中，通过setItem方法

解决跨域问题

此时允许点击“登录”按钮，会报错，出现跨域问题

在这里插入图片描述

跨域问题：通过ajax从一个服务访问另一个服务时，出现跨域问题

服务：只要ip或端口或协议不同，都称为不同的域

如何解决：

由两种方式：前端解决和后端解决，这里仅讲解后端的解决方式

  • 后端解决

    在config中创建一个用于解决跨域问题的配置类

    @Configuration
public class AllowOriginConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") // 所有接口
                .allowCredentials(true) // 是否发送 Cookie
                .allowedOrigins("*")//支持域
               // .allowedOriginPatterns("*") // 支持域
                .allowedMethods(new String[]{"GET", "POST", "PUT", "DELETE"}) // 支持方法
                .allowedHeaders("*")
                .exposedHeaders("*");
    }
}

    在security配置类中添加登录允许跨域的设置

    因为其他需求可以，而login不行，因为login是security写的，不止自己写的

    http.cors();

     @Override
    protected void configure(HttpSecurity http) throws Exception {
        //把自定义的过滤器放在之前
        http.addFilterBefore(loginFilter, UsernamePasswordAuthenticationFilter.class);
        http.formLogin()
                //登录页面;
                //登录的处理路径 默认 /login
                .loginProcessingUrl("/login")
                .successHandler(successHandler())//登录成功
                .failureHandler(failureHandler()) //登录失败转发的路径 必须为post请求
                .permitAll(); //上面的请求路径无需认证
        //指定权限不足跳转的页面
        http.exceptionHandling().accessDeniedHandler(accessDeniedHandler());

        http.csrf().disable();//禁用跨域伪造请求的过滤器
        //security登录允许跨域
        http.cors();
        //除了上的请求,其他请求都需要认证
        http.authorizeRequests().anyRequest().authenticated();
    }

4. 前置路由守卫

前置路由守卫用于判断有没有登录

放在main.js或/router/index.js中

在设置前置路由守卫之前，在没有登录的情况下，可以直接访问登录后的页面——不符合现实，所以使用前置路由守卫，来判断有没有登录

  1. 先查看路径，若用户访问的是登录页面/login，直接放行
  2. 若不是，就获取sessionStorage中保存的token值
  3. 若token不存在，或者token为undefined，就强制跳转到/login登录页面
  4. 如果token存在，直接放行
//前置路由守卫
//to:即将要访问的路径
//from：从哪里来
//next：放行函数
router.beforeEach((to,from,next)=>{
      //如果用户访问的是登录页面，直接放行
  if(to.path === '/login'){
    //放行
    return next();
  }
  //获取sessionStorage中保存的token值
  const token = window.sessionStorage.getItem('token');
  //如果token不存在，强制跳转到登录页面
  if(!token){
    return next("/login");
  }
  //如果token存在，直接放行
  next();
})

5. 设置携带token令牌：请求拦截器

在未设置请求拦截器之前，成功登录后，点击按钮均显示“未登录”，是因为请求没有携带token令牌，后端判断为未登录

放在main.js中

//设置请求拦截器——携带token令牌
axios.interceptors.request.use(config=>{
  var token = sessionStorage.getItem("token");
  if(token){
    config.headers.token = token;
  }
  return config;
})

6. 设置响应拦截器

确保后端，返回类型为R类型

在main.js中设置响应拦截器

  • 后端示例
@PreAuthorize("hasAuthority('user:query')")
    @GetMapping("/select")
    public R select(){
        System.out.println("查询用户");
        return new R(200,"查询用户","查询用户");
    }
  • 前端响应拦截器
//设置响应拦截器
axios.interceptors.response.use(response=>{
  //如果返回的code为200，为成功，显示返回的信息
  if(response.data.code===200){
    Vue.prototype.$message.success(response.data.msg);
    return response;
  }else {
    //否则，为失败，显示返回的信息
    Vue.prototype.$message.error(response.data.msg);
    return response;
  }
})

设置响应拦截器之后，就可以通过响应拦截器将后端的信息显示到前端页面，无需在axios请求中再次处理相关msg

  • 示例

    methods:{
    query(){
      this.$axios.get('/user/select').then(res=>{})
    },
    insert(){
      this.$axios.get('/user/add').then(res=>{})
    },
    del(){
      this.$axios.get('/user/delete').then(res=>{})
    },
    update(){
      this.$axios.get('/user/update').then(res=>{})
    },
    myExport(){
      this.$axios.get('/user/export').then(res=>{})
    }
  },

7. 退出

后端：借助redis完成。

  1. 在登录时，登录成功后，将token存入到redis中
  2. 在配置时，自定义实现退出接口，使其在退出登录后，删除redis中的缓存信息，并返回json数据，而不是页面
  3. 在登录过滤器中，验证token时加判断，判断redis中是否存在登录的token

因为要借助redis，所以需要导入redis，并在配置文件中进行配置，并且开启装有redis的虚拟机，开启redis服务

  • 引入依赖

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

  • 在配置文件中添加redis相关配置

    #Redis服务器连接端口
spring.redis.port=6379
#Redis服务器地址
spring.redis.host=172.16.7.112

  • 在登录成功后将token添加到redis中

    //将token存入redis缓存中
    redisTemplate.opsForValue().set("login:"+token,"");

    @Autowired
    private StringRedisTemplate redisTemplate;
    //登录成功需要返回的json数据
    private   AuthenticationSuccessHandler successHandler(){
      return new AuthenticationSuccessHandler() {
          @Override
          public void onAuthenticationSuccess(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Authentication authentication) throws IOException, ServletException {
              //设置响应编码
              httpServletResponse.setContentType("application/json;charset=utf-8");
              //获取输出对象
              PrintWriter writer = httpServletResponse.getWriter();
              //返回json数据
              Map<String,Object> map=new HashMap<>();

              map.put("username",authentication.getName());
              //获取权限信息列表
              Collection<? extends GrantedAuthority> authorities = authentication.getAuthorities();
             //获取权限标识码
              List<String> collect = authorities.stream().map(item -> item.getAuthority()).collect(Collectors.toList());
              map.put("permission",collect);
              String token = JWTUtil.createToken(map);
              //将token存入redis缓存中
                redisTemplate.opsForValue().set("login:"+token,"");
              //返回一个统一的json对象
              R r=new R(200,"登录成功！",token);
              //转换未json字符串
              String s = JSON.toJSONString(r);
              //servlet
              //发送响应到客户端
              writer.println(s);//将JSON字符串写入到HTTP响应中
              writer.flush();//确保所有缓冲的输出都被发送到客户端
              writer.close();//关闭PrintWriter

          }
      };
    }

  • 在security配置文件中重写退出方法

    //退出登录后，删除redis中的缓存信息
    redisTemplate.delete("login:"+token);

     @Override
    protected void configure(HttpSecurity http) throws Exception {
        //把自定义的过滤器放在之前
        http.addFilterBefore(loginFilter, UsernamePasswordAuthenticationFilter.class);
        http.formLogin()
                //登录页面;
                //登录的处理路径 默认 /login
                .loginProcessingUrl("/login")
                .successHandler(successHandler())//登录成功
                .failureHandler(failureHandler()) //登录失败转发的路径 必须为post请求
                .permitAll(); //上面的请求路径无需认证
        //指定权限不足跳转的页面
        http.exceptionHandling().accessDeniedHandler(accessDeniedHandler());

        http.csrf().disable();//禁用跨域伪造请求的过滤器
        //退出，重写使其返回json数据，而不是网页
        http.logout(item->{
            item.logoutSuccessHandler((httpServletRequest, httpServletResponse, e) -> {
                httpServletResponse.setContentType("application/json;charset=utf-8");
                PrintWriter writer = httpServletResponse.getWriter();
                String token = httpServletRequest.getHeader("token");
                //退出登录后，删除redis中的缓存信息
                redisTemplate.delete("login:"+token);
                R r=new R(200,"退出成功",null);
                String jsonString =JSON.toJSONString(r);
                writer.println(jsonString);
                writer.flush();
                writer.close();
            });
        });
        //security登录允许跨域
        http.cors();
        //除了上的请求,其他请求都需要认证
        http.authorizeRequests().anyRequest().authenticated();
    }

  • 在登录过滤器中添加判断条件

    !redisTemplate.hasKey("login:"+token

      //3. 验证token
     if(!JWTUtil.verify(token)||!redisTemplate.hasKey("login:"+token)){
         PrintWriter writer = httpServletResponse.getWriter();
         //返回一个token失效的json数据
         R r=new R(500,"token失效！",null);
         String s = JSON.toJSONString(r);
         writer.write(s);
         writer.flush();
         writer.close();
         return;
     }

  • 前端，添加退出点击事件，退出后删除sessionStorage中的token信息，并跳转返回登录页面

     logout(){
      this.$axios.post("/logout").then(res=>{
        //移除sessionStorage中的token
        sessionStorage.removeItem("token")
        //跳转到登录页面
        this.$router.push("/login")
      })
    }
晚安720
关注
  • 5
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
登录页示例_一起来捋一捋前后端分离登录过程的思路并实现全过程
weixin_39616855的博客
01-14 1325
本文将实现前后端分离开发模式下的登录过程需要使用到的技术栈为：go/java web框架(gin/springboot)mysql orm框架(gorm/mybatis)vue(前端框架)看似不起眼的登录其实还是有很多值得探讨的地方在保证安全的情况也也要增加用户的体验现在的开发中一般都采用前后端分离的模式采用jwt token进行鉴权若token失效，此时需要重新登录并且调用其他请求时，...
登陆界面的前台与后台
SS__FF的博客
09-16 2721
JSP页面 1.form表单提交到 通过name 传递input数据 2.servlet request去get 这个name 3.servlet 得到数据后将多个表单数据set到对象中，调用对象定义方连接数据库去实现数据的核对操纵判断是否密码用户正确 <%@ page language="java" contentType="text/html; charset=UTF-8" p
前后端分离项目springsecurity实现用户登录认证快速使用
m0_71751187的博客
03-20 1622
ps：该文章适合未系统学习springsecurity快速使用，可以直接cv使用，只有部分源码讲解，个人觉得先会用了再深究原理。
前后端分离项目之登录页面(前后端请求、响应和连接数据库)
weixin_63541561的博客
06-03 3130
目录一、前端登录发起请求二、后端请求接收三、连接数据库四、后端响应五、前端处理六、在前端验证用户是否登录七、web会话跟踪八、请求拦截器和响应拦截器. web会话跟踪：http是无状态的，登录完成后客户端与服务器断开了连接，之后再向后端发送请求，后端就不知道是哪个客户端发送的。
shiro的前后的分离的使用（SpringBoot）
JackMa的博客
09-22 1252
shiro的前后的分离的使用（SpringBoot）
SpringSecurity实现前后端分离登录授权详解
qq_43649937的博客
06-14 4877
SpringSecurity java Springboot
html完美前后台登陆界面
09-26
html完美前后台登陆界面 学习时的必备资料 真的很不错 很强大
RuoYi 前后端分离“退出登录跨域”问题
weixin_38171468的博客
04-07 3051
跨域问题一直都是很多人比较困扰的问题，我在项目开发的时候也遇到了， 主要讲述的是Spring Security 实现过滤器的作用，是spring项目之中的一个安全模块 Spring Security 结合跨域资源共享(CORS) 来实现跨域问题 跨域资源共享(CORS)是一种机制，它使用额外的 HTTP 头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不...
springboot jwt token前后端分离_前后端分离之JWT用户认证
weixin_39929721的博客
12-06 1940
在前后端分离开发时为什么需要用户认证呢？原因是由于HTTP协定是不储存状态的(stateless)，这意味着当我们透过帐号密码验证一个使用者时，当下一个request请求时它就把刚刚的资料忘了。于是我们的程序就不知道谁是谁，就要再验证一次。所以为了保证系统安全，我们就需要验证用户否处于登录状态。传统方式前后端分离通过Restful API进行数据交互时，如何验证用户的登录信息及权限。在原...
Spring boot+Spring security+JWT实现前后端分离登录认证及权限控制
m0_54849806的博客
08-02 5925
基本上没讲什么底层实现，这篇是使用篇，后续会出SpringSecurity的底层源码讲解，并且如果本帖有问题的有疑问的读者可以在评论区留言，本人会积极处理。您的支持是我最大的动力，本人一直在努力的更新各种框架的使用和框架的源码解读~！先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。httpshttpshttps。...
前后端分离单点登录SSO实现方案 淘宝、京东跨域获取Cookie、OAuth2、QQ客户端多种模式
xhyxxx的博客
11-26 3187
演示Demo站点 http://sso.exrick.cn 开源版Github地址 https://github.com/Exrick/x-boot 开发文档 https://www.kancloud.cn/exrick/xboot/1009234 获取完整版 http://xpay.exrick.cn/pay?xboot 前后端分离下单点登录实现 单点登录模式 优点 缺点 共享...
前后端分离项目的登录实现
最新发布
cxy94188的博客
07-28 243
系统启动时读取缓存（redis）或者数据库（mysql）中的验证码功能设置参数（key：sys.account.captchaOff）如果缓存中有值，直接返回；@z，z为验证码答案）使用createImage方法生成对应文本的验证码图片。如果验证码类型为char则调用captchaProducer的createText方法生成验证码文本（字母加数字）使用createImage方法生成对应文本的验证码图片。如果查询到的验证码功能的参数为（false）则直接返回参数值，如果为true则开始生成验证码。
Spring Boot+Vue从零开始搭建系统（三）：项目前后端分离_实现简单登录demo
weixin_34293059的博客
04-06 5184
前言 本文主要是想通过后端 Spring Boot 技术和前端 Vue 技术来简单开发一个登录demo，该demo以简单、方便理解的方式来记录前后端结合使用的过程，方便正式开发复杂项目时能提前整体理解流程，demo最终实现的效果如下图: DEMO功能描述 输入http://localhost:8080回车浏览器自动跳转到http://...
手把手教你做一个前后端分离的登录小案例
程序猿小龙的博客
07-01 4131
文章目录手把手教你做一个前后端分离的登录小案例1、开发环境及技术选型2、数据库准备3、前端开发4、后端开发5、最终效果 手把手教你做一个前后端分离的登录小案例 1、开发环境及技术选型 开发环境：IntelliJ IDEA、HBuilder X、MySQL 5.5、Vue CLI 4.4.6 技术选型：   前端：Vue+Element UI   后端：SpringBoot+MyBatis+MySQL 2、数据库准备   数据库很简单，就是准备一个登录表，里面有账号和密码。通过匹配账号和密码的正确性，登录到主
前后端分离使用 Token 登录解决方案
weixin_33943347的博客
08-24 6698
这篇文章写一下前后端分离下的登录解决方案，目前大多数都采用请求头携带 Token 的形式。 开写之前先捋一下整理思路： 首次登录时，后端服务器判断用户账号密码正确之后，根据用户id、用户名、定义好的秘钥、过期时间生成 token ，返回给前端； 前端拿到后端返回的 token ,存储在 localStroage 和 Vuex 里； 前端每次路由跳转，判断 localStroage 有无 toke...
前后端分离的登录：token机制
Chengqb的博客
05-30 1万+
   随着互联网的不断发展，技术的迭代也非常之快。我们的用户认证也从刚开始的 用户名密码 转变到 基于cookie的session认证 ，然而到了今天，这种认证已经不能满足与我们的业务需求了（ 分布式，微服务 ）。我们采用了另外一种认证方式： 基于token的认证 一、与cookie相比较的优势：    1、支持跨域访问 ，将token置于请求头中，而cookie是不支持跨域访问的；    2、无...
登录功能代码(前端＋后端)
热门推荐
张思阳的博客
04-29 5万+
1.实现思路 在登录页面用表单提交数据的方式，向后端发送用户名和密码； 在数据库的用户表中查询是否有前端传来的用户名和密码，并向前端返回提示信息 登录成功后跳回原页面 2.实现代码 登录页面HTML代码 &lt;form id="login"&gt; 用户名: &lt;input id="txtName" name="uname" value=""/&gt;&l
VueJS实现前后端分离：登录与Token处理
总结起来，这个教程通过一个简单的VueJS项目，展示了如何在前后端分离的环境中实现登录功能，并有效处理Token，同时也介绍了如何利用Webpack和相关插件构建Vue应用。这对于初学者了解VueJS的实战应用以及前端开发...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值