手把手带你入门 前后端分离整合SpringSecurity，Vue整合SpringSecurity

简单的前后端分离整合SpringSecurity

推荐学习地址：https://blog.csdn.net/u012702547/article/details/79019510

在普通的项目中使用SpringSecurity比较简单，但是在前后端分离的项目中使用SpringSecurity就比较复杂了

总体步骤：

• 创建简易的数据库（用户表、权限表等）

• 创建一个简单的Vue登录页面

• 编写实体类

• 编写登录的dao、service等

• 在Controller中编写一个@GetMapping("/login")的控制器

• 重点来了
  + 在实体类中实现UserDetails
  + 编写UserDetailsService实现loadUserByUsername对输入的用户名、密码进行验证
  + 编写主配置类，配置密码加密、登录、拦截、登出等功能
  + 编写辅类，主要用于显示权限不足、是否登录、权限等等一些列的json数据

代码

1. 数据库（省略）
2. 创建一个简单的Vue登录页面

<template>
  <div class="login-div">
    <div class="img"></div>
    <el-form ref="loginForm" :model="form" :rules="rules" label-width="70px" class="login-box" >
      <div class="form">
        <h3 class="login-title">欢迎登录</h3>
        <el-form-item label="账号" prop="username">
          <el-input
            type="text"
            placeholder="请输入账号"
            v-model="form.username"
          />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            placeholder="请输入密码"
            v-model="form.password"
          />
        </el-form-item>
        <el-form-item class="yzm" label="验证码" prop="yzm">
          <el-input type="text" placeholder="请输入验证码" v-model="form.yzm" />
          <div class="vc">
            <img
              :src="'http://127.0.0.1:8080/api/users/umsUser/captcha.jpg'"
              alt=""
            />
            <span>&nbsp;<a href="">看不清?</a></span>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="onSubmit('loginForm')"
            >登录</el-button
          >
        </el-form-item>
      </div>
    </el-form>

    <el-dialog title="温馨提示" :visible.sync="dialogVisible" width="30%">
      <span>请输入账号和密码</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import qs from "qs";
export default {
  name: "Login",
  data() {
    return {
      form: {
        username: "",
        password: "",
        yzm: "",
      },
      imgsrc: "",
      // 表单验证，需要在 el-form-item 元素中增加 prop 属性
      rules: {
        username: [
          { required: true, message: "账号不可为空", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码不可为空", trigger: "blur" },
        ],
        yzm: [{ required: true, message: "验证码不能为空", trigger: "blur" }],
      },
      // 对话框显示和隐藏
      dialogVisible: false,
    };
  },
  methods: {
    onSubmit(formName) {
      // 为表单绑定验证功能
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //发送登录请求
          var form = new window.FormData();
          form.append("username", "laotie");
          let url =`/api/users/login?username=` +this.form.username +"&password=" +this.form.password;
           var _this=this;
          this.$http.post(url,qs.stringify(form),
              {
                //设置请求头，否则后台获取不到数据
                headers: {
                  "Content-Type": "application/x-www-form-urlencoded",
                },
              },
              {}
            )
            .then(function (data) {
              if (data.data.status == "success") {
                _this.$message({
                  message: '登录成功，欢迎回来:'+_this.form.username,
                  type: 'success'
                });
                _this.$router.push("/about");
              }else{
                console.log('登录失败');
                  this.$message.error('登录失败');
              }
            });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.login-box {
  width: 400px;
  padding: 35px 35px 15px 35px;
  border-radius: 5px;
  margin-top: 25px;
  margin: 0 auto;
}

.login-title {
  text-align: center;
  margin: 8px auto;
  color: #303133;
}
.login-div {
  display: flex;
  align-items: center;
  position: relative;
  top: 60px;
}
.img {
  width: 50%;
  height: 500px;
  background-image: url("../assets/background.jpg");
  background-size: 100% 100%;
}
.form {
  position: relative;
  right: 160px;
}
.vc {
  margin-top: 5px;
}
</style>

3. 编写实体类（省略）
4. 编写登录的dao、service等就是简单的根据用户名查询用户信息（省略）
5. 在Controller中编写一个@GetMapping("/login")的控制器

    @GetMapping("/login")
    public R login() {
   
        return R.failed("尚未登录，请登录!");
    }

6. 开始配置SpringSecurity

   1. 在实体类中实现UserDetails

   public class UmsUser extends Model<UmsUser> implements UserDetails {
        
   	......
           
       @Override
       public Collection<? extends GrantedAuthority> getAuthorities() {
        
           List<GrantedAuthority> authorities = new ArrayList<>();
   //        for (Role role : roles) {
        
   //            authorities.add(new SimpleGrantedAuthority(role.getName()));
   //        }
           return authorities;
       }
   
       @Override
       public boolean isAccountNonExpired() {
        
           return false;
       }
   
       @Override
       public boolean isAccountNonLocked() {
        
           return false;
       }
   
       @Override
       public boolean isCredentialsNonExpired() {
        
           return false;
       }
   
       @Override
       public boolean isEnabled() {
        
           return false;
       }
   }
   

   2. 编写UserDetailsService实现loadUserByUsername对输入的用户名、密码进行验证

   @Slf4j
   @Service
   public class SecurityUserDatilService implements UserDetailsService {
        
   
       @Resource
       private UmsUserService umsUserService;
   
       /**
        * 登录
        * @param username
        * @return
        */
       @Override
       public UserDetails loadUserByUsername(String username) {
        
           ServletRequestAttributes attributes = (ServletRequestAttributes) RequestContextHolder.getRequestAttributes();
           HttpServletRequest request = attributes.getRequest();
           //获取验证码此处可以省略
           Object captcha = request.getSess