CRM项目将登录信息处理作Json配置YAML文件Redis集群连接前端接受Json并存进本地------CRM项目

已于 2024-02-06 18:17:52 修改
阅读量948 收藏 22
点赞数 28
分类专栏： CRM项目 # Spring-Security框架 # VUE框架 文章标签： java 后端 vue.js vue 前端框架 前端 json
于 2024-02-06 17:32:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75960169/article/details/136060151
版权 
package com.alatus.config.handler;

import com.alatus.constant.Constants;
import com.alatus.model.TUser;
import com.alatus.result.R;
import com.alatus.service.RedisService;
import com.alatus.util.JSONUtils;
import com.alatus.util.JWTUtils;
import com.alatus.util.ResponseUtils;
import jakarta.annotation.Resource;
import jakarta.servlet.ServletException;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import org.springframework.security.core.Authentication;
import org.springframework.security.web.authentication.AuthenticationSuccessHandler;
import org.springframework.stereotype.Component;

import java.io.IOException;
import java.util.concurrent.TimeUnit;

@Component
public class MyAuthenticationSuccessHandler implements AuthenticationSuccessHandler {
    @Resource
    private RedisService redisService;
    @Override
    public void onAuthenticationSuccess(HttpServletRequest request, HttpServletResponse response, Authentication authentication) throws IOException, ServletException {
        //由于禁用了session，我们在登录成功后，需要在服务器保持用户的登录状态，前端下次来访问服务器端的时候，服务器端要知道这个人登录了
        TUser tUser = (TUser) authentication.getPrincipal();
//        登录成功的统一结果
        R result = R.OK(tUser);
//        把R对象转为JSON
        String resultJSON = JSONUtils.toJSON(result);
//        生成jwt
        String jwt = JWTUtils.createJWT(resultJSON);
        String key = Constants.REDIS_JWT_KEY+tUser.getId();
//        写入Redis
        redisService.setValue(key,jwt);
//        设置jwt的过期时间,如果选择了记住我,jwt过期时间为七天,否则是30分钟
        Boolean rememberMe = Boolean.valueOf(request.getParameter("rememberMe"));
        if(rememberMe){
            redisService.expire(key,Constants.EXPIRE_TIME, TimeUnit.SECONDS);
        }
        else{
            redisService.expire(key,Constants.DEFAULT_EXPIRE_TIME,TimeUnit.SECONDS);
        }
//        把R以JSON传回前端
        ResponseUtils.write(response,jwt);
    }
}

package com.alatus.config.handler;

import com.alatus.constant.Constants;
import com.alatus.model.TUser;
import com.alatus.result.R;
import com.alatus.service.RedisService;
import com.alatus.util.JSONUtils;
import com.alatus.util.JWTUtils;
import com.alatus.util.ResponseUtils;
import jakarta.annotation.Resource;
import jakarta.servlet.ServletException;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import org.springframework.security.core.Authentication;
import org.springframework.security.web.authentication.AuthenticationSuccessHandler;
import org.springframework.stereotype.Component;

import java.io.IOException;
import java.util.concurrent.TimeUnit;

@Component
public class MyAuthenticationSuccessHandler implements AuthenticationSuccessHandler {
    @Resource
    private RedisService redisService;
    @Override
    public void onAuthenticationSuccess(HttpServletRequest request, HttpServletResponse response, Authentication authentication) throws IOException, ServletException {
        //由于禁用了session，我们在登录成功后，需要在服务器保持用户的登录状态，前端下次来访问服务器端的时候，服务器端要知道这个人登录了
        TUser tUser = (TUser) authentication.getPrincipal();
//        登录成功的统一结果
        R result = R.OK(tUser);
//        把R对象转为JSON
        String resultJSON = JSONUtils.toJSON(result);
//        生成jwt
        String jwt = JWTUtils.createJWT(resultJSON);
        String key = Constants.REDIS_JWT_KEY+tUser.getId();
//        写入Redis
        redisService.setValue(key,jwt);
//        设置jwt的过期时间,如果选择了记住我,jwt过期时间为七天,否则是30分钟
        Boolean rememberMe = Boolean.valueOf(request.getParameter("rememberMe"));
        if(rememberMe){
            redisService.expire(key,Constants.EXPIRE_TIME, TimeUnit.SECONDS);
        }
        else{
            redisService.expire(key,Constants.DEFAULT_EXPIRE_TIME,TimeUnit.SECONDS);
        }
//        把R以JSON传回前端
        ResponseUtils.write(response,jwt);
    }
}

---
spring:
  data:
    redis:
      lettuce:
        pool:
          max-idle: 8
          min-idle: 0
          max-wait: -1ms
          max-active: 8
        cluster:
          refresh:
            adaptive: true
            period: 2000
      cluster:
        max-redirects: 3
        nodes: 192.168.189.128:6381,192.168.189.128:6382,192.168.189.130:6383,192.168.189.130:6384,192.168.189.129:6385,192.168.189.129:6386
      password: abc123
      database: 0
      timeout: 5000
---
server:
  port: 8089
  servlet:
    context-path: /
    session:
      persistent: false
---
spring:
  datasource:
    url: jdbc:mysql://127.0.0.1:3306/dlyk?useUnicode=true&characterEncoding=utf-8&useSSL=false
    driver-class-name: com.mysql.cj.jdbc.Driver
    username: root
    password: abc123
    hikari:
      maximum-pool-size: 30
      minimum-idle: 30
      connection-timeout: 5000
      idle-timeout: 0
      max-lifetime: 18000000
---
mybatis:
  mapper-locations: classpath:mapper/*.xml

---
spring:
  data:
    redis:
      lettuce:
        pool:
          max-idle: 8
          min-idle: 0
          max-wait: -1ms
          max-active: 8
        cluster:
          refresh:
            adaptive: true
            period: 2000
      cluster:
        max-redirects: 3
        nodes: 192.168.189.128:6381,192.168.189.128:6382,192.168.189.130:6383,192.168.189.130:6384,192.168.189.129:6385,192.168.189.129:6386
      password: abc123
      database: 0
      timeout: 5000
---
server:
  port: 8089
  servlet:
    context-path: /
    session:
      persistent: false
---
spring:
  datasource:
    url: jdbc:mysql://127.0.0.1:3306/dlyk?useUnicode=true&characterEncoding=utf-8&useSSL=false
    driver-class-name: com.mysql.cj.jdbc.Driver
    username: root
    password: abc123
    hikari:
      maximum-pool-size: 30
      minimum-idle: 30
      connection-timeout: 5000
      idle-timeout: 0
      max-lifetime: 18000000
---
mybatis:
  mapper-locations: classpath:mapper/*.xml

<template>
    <el-container>
        <!-- 左侧 -->
      <el-aside>
        <img src="../assets/logo.png">
        <img src="../assets/1.png">
        <p class="imgTitle">欢迎使用CRM系统</p>
      </el-aside>
      <!-- 右侧 -->
      <el-main>
        <div class="loginTitle">欢迎登陆</div>
        <!-- 表单 -->
        <el-form ref="loginRefForm" :model="user" label-width="20%" :rules="loginRules">
            <!-- 账号 -->
            <el-form-item label="账号:" prop="loginAct">
                <el-input v-model="user.loginAct" />
            </el-form-item>

            <!-- 密码 -->
            <el-form-item label="密码:" prop="loginPwd">
                <el-input type="password" v-model="user.loginPwd" />
            </el-form-item>

            <!-- 记住密码 -->
            <el-form-item>
                <el-checkbox label="记住密码" v-model="user.rememberMe" name="rememberMe" />
            </el-form-item>
            <!-- 登录按钮 -->
            <el-form-item>
                <el-button type="primary" @click="login()" :plain="true">登录</el-button>
            </el-form-item>
            
        </el-form>
      </el-main>
    </el-container>
</template>

<script>
import { messageTip } from "../util/util.js"
import { doPost } from '../http/httpRequest';
export default {
    name : "LoginView",
    data(){
        return {
            user : {
                loginAct : "",
                loginPwd : "",
                rememberMe : false
            },
            // 定义登录表单的验证规则
            loginRules : {
                // 账号验证规则
                loginAct : [
                    { required: true, message: '请输入登录账号', trigger: 'blur' },
                    { min: 3, max: 15, message: '账号长度不合法', trigger: 'blur' },
                ],
                // 密码验证规则
                loginPwd : [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 18, message: '密码长度不合法', trigger: 'blur' },
                ]
            }
        }
    },
    methods : {
        // 将页面上的函数在此定义
        login(){
            // 提交前要验证合法性
            this.$refs.loginRefForm.validate((isValid) => {
                // isValid是验证后回传的结果,true为通过
                if(isValid){
                    // 验证通过,可以提交
                    let formData = new FormData();
                    // 可以视为map,是json对象
                    // 内部以键值对形式提交数据给后台
                    formData.append("loginAct",this.user.loginAct);
                    formData.append("loginPwd",this.user.loginPwd);
                    formData.append("rememberMe",this.user.rememberMe);
                    // 不要用对象传,用formData传递数据
                    doPost("/api/login",formData).then((resp) => {
                        console.log(resp);
                        if(resp.status === 200){
                            messageTip('登陆成功,即将跳转到主页',"success");
                            // 存储jwt
                            if(this.user.rememberMe === true){
                                window.localStorage.setItem("crmSystem",resp.data);
                            }
                            else{
                                window.sessionStorage.setItem("crmSystem",resp.data);
                            }
                            window.location.href="/dashboard"
                        }
                        else{
                            messageTip('登陆失败,请检查您的信息',"error");
                        }
                    });
                }
            });
        }
    }
}
</script>

<style scoped>
.el-aside {
    background: black;
    width: 40%;
    text-align: center;
}
.imgTitle {
    color: white;
    font-size: 28px;
    font-weight: bold;
}
.el-aside img {
    height: 30%;
}
.el-main {
    width: 60%;
    /* 使用JS实现铺满 */
    /* 设置为100%屏幕高度 */
    height: calc(100vh);
}
.el-form {
    width: 60%;
    margin: auto;
}
.loginTitle{
    text-align: center;
    margin-top: 10%;
    margin-bottom: 5%;
    font-size: 30px;
    font-weight: bold;
}
.el-button{
    width: 100%;
}
</style>

<template>

    <el-container>

        <!-- 左侧 -->

      <el-aside>

        <img src="../assets/logo.png">

        <img src="../assets/1.png">

        <p class="imgTitle">欢迎使用CRM系统</p>

      </el-aside>

      <!-- 右侧 -->

      <el-main>

        <div class="loginTitle">欢迎登陆</div>

        <!-- 表单 -->

        <el-form ref="loginRefForm" :model="user" label-width="20%" :rules="loginRules">

            <!-- 账号 -->

            <el-form-item label="账号:" prop="loginAct">

                <el-input v-model="user.loginAct" />

            </el-form-item>

            <!-- 密码 -->

            <el-form-item label="密码:" prop="loginPwd">

                <el-input type="password" v-model="user.loginPwd" />

            </el-form-item>

            <!-- 记住密码 -->

            <el-form-item>

                <el-checkbox label="记住密码" v-model="user.rememberMe" name="rememberMe" />

            </el-form-item>

            <!-- 登录按钮 -->

            <el-form-item>

                <el-button type="primary" @click="login()" :plain="true">登录</el-button>

            </el-form-item>

           

        </el-form>

      </el-main>

    </el-container>

</template>

<script>

import { messageTip } from "../util/util.js"

import { doPost } from '../http/httpRequest';

export default {

    name : "LoginView",

    data(){

        return {

            user : {

                loginAct : "",

                loginPwd : "",

                rememberMe : false

            },

            // 定义登录表单的验证规则

            loginRules : {

                // 账号验证规则

                loginAct : [

                    { required: true, message: '请输入登录账号', trigger: 'blur' },

                    { min: 3, max: 15, message: '账号长度不合法', trigger: 'blur' },

                ],

                // 密码验证规则

                loginPwd : [

                    { required: true, message: '请输入密码', trigger: 'blur' },

                    { min: 6, max: 18, message: '密码长度不合法', trigger: 'blur' },

                ]

            }

        }

    },

    methods : {

        // 将页面上的函数在此定义

        login(){

            // 提交前要验证合法性

            this.$refs.loginRefForm.validate((isValid) => {

                // isValid是验证后回传的结果,true为通过

                if(isValid){

                    // 验证通过,可以提交

                    let formData = new FormData();

                    // 可以视为map,是json对象

                    // 内部以键值对形式提交数据给后台

                    formData.append("loginAct",this.user.loginAct);

                    formData.append("loginPwd",this.user.loginPwd);

                    formData.append("rememberMe",this.user.rememberMe);

                    // 不要用对象传,用formData传递数据

                    doPost("/api/login",formData).then((resp) => {

                        console.log(resp);

                        if(resp.status === 200){

                            messageTip('登陆成功,即将跳转到主页',"success");

                            // 存储jwt

                            if(this.user.rememberMe === true){

                                window.localStorage.setItem("crmSystem",resp.data);

                            }

                            else{

                                window.sessionStorage.setItem("crmSystem",resp.data);

                            }

                            window.location.href="/dashboard"

                        }

                        else{

                            messageTip('登陆失败,请检查您的信息',"error");

                        }

                    });

                }

            });

        }

    }

}

</script>

<style scoped>

.el-aside {

    background: black;

    width: 40%;

    text-align: center;

}

.imgTitle {

    color: white;

    font-size: 28px;

    font-weight: bold;

}

.el-aside img {

    height: 30%;

}

.el-main {

    width: 60%;

    /* 使用JS实现铺满 */

    /* 设置为100%屏幕高度 */

    height: calc(100vh);

}

.el-form {

    width: 60%;

    margin: auto;

}

.loginTitle{

    text-align: center;

    margin-top: 10%;

    margin-bottom: 5%;

    font-size: 30px;

    font-weight: bold;

}

.el-button{

    width: 100%;

}

</style>

旧约Alatus
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值