SpringBoot整合Shiro实现登录和注册功能

首先，让我们介绍一下Shiro。Shiro是一个非常流行的Java安全框架，它提供了身份验证、授权、加密和会话管理等安全功能。Shiro的一个重要特点是它的易用性和灵活性，它可以与各种Java框架（如Spring、Spring Boot、Struts等）无缝集成，并提供了丰富的API和扩展点。

同时，Spring Boot也是一个非常流行的Java框架，它提供了一种快速、方便、灵活地构建基于Spring的应用程序的方式。Spring Boot的另一个重要特点是简化配置，使开发人员只需关注于业务逻辑，并可以快速构建生产就绪的应用程序。

那么，Shiro和Spring Boot怎样整合呢？其实非常简单，只需要按照以下步骤即可实现：

1. 开发ShiroConfig配置类。

首先，我们需要使用ShiroConfig配置类来配置Shiro框架。这个配置类主要用于配置Shiro的各种配置属性，例如Realm、SessionManager、SecurityManager等。下面是一个简单的ShiroConfig实现：

@Configuration
public class ShiroConfig {
    
    /**
     * 自定义realm
     */
    @Bean
    public UserRealm userRealm() {
        return new UserRealm();
    }
    
    /**
     * 安全管理器
     */
    @Bean
    public SecurityManager securityManager(UserRealm userRealm) {
        DefaultWebSecurityManager securityManager = new DefaultWebSecurityManager();
        securityManager.setRealm(userRealm);
        return securityManager;
    }
    
    /**
     * 开启Shiro注解
     */
    @Bean
    public AuthorizationAttributeSourceAdvisor authorizationAttributeSourceAdvisor(SecurityManager securityManager) {
        AuthorizationAttributeSourceAdvisor advisor = new AuthorizationAttributeSourceAdvisor();
        advisor.setSecurityManager(securityManager);
        return advisor;
    }
    /**
     * 开启自动代理
     */
    @Bean
    public DefaultAdvisorAutoProxyCreator defaultAdvisorAutoProxyCreator() {
        DefaultAdvisorAutoProxyCreator creator = new DefaultAdvisorAutoProxyCreator();
        creator.setProxyTargetClass(true);
        return creator;
    }
}

在这个配置类中，我们定义了一个UserRealm来验证用户的凭据，然后将它注入到DefaultWebSecurityManager中，将安全管理器添加到Spring的ApplicationContext中。

2. 开发UserRealm类。

接下来，我们需要开发一个UserRealm类来实现Shiro的Realm接口。这个类主要用于验证用户的凭据、获取用户角色和权限等。下面是一个简单的UserRealm实现：

public class UserRealm extends AuthorizingRealm {
    
    @Override
    protected AuthorizationInfo doGetAuthorizationInfo(PrincipalCollection principalCollection) {
        SimpleAuthorizationInfo authorizationInfo = new SimpleAuthorizationInfo();
        authorizationInfo.setRoles(Collections.singleton("USER"));
        authorizationInfo.setStringPermissions(Collections.singleton("user:read"));
        
        return authorizationInfo;
    }
    
    @Override
    protected AuthenticationInfo doGetAuthenticationInfo(AuthenticationToken authenticationToken) throws AuthenticationException {
        UsernamePasswordToken token = (UsernamePasswordToken) authenticationToken;
        String username = token.getUsername();
        String password = new String(token.getPassword());
        
        // TODO: validate username and password
        
        return new SimpleAuthenticationInfo(username, password, getName());
    }
}

在这个UserRealm中，我们在doGetAuthenticationInfo()方法中获取用户输入的用户名和密码，并验证用户名和密码的正确性。在doGetAuthorizationInfo()方法中，我们定义了用户角色和权限信息。

3. 开发前端Vue页面。

接下来，我们需要开发一个前端Vue页面用于用户注册和登录。下面是一个简单的Vue页面实现：

<template>
  <div>
    <h2>LOGIN</h2>
    <form class="form-group">
      <label for="username">Username:</label>
      <input type="text" class="form-control" v-model="username" name="username"/>
      <label for="password">Password:</label>
      <input type="password" class="form-control" v-model="password" name="password"/>
      <button class="btn btn-primary" v-on:click="login">Login</button>
      <button class="btn btn-secondary" v-on:click="clear">Clear</button>
    </form>
    <br>
    <h2>REGISTER</h2>
    <form class="form-group">
      <label for="username2">Username:</label>
      <input type="text" class="form-control" v-model="username2" name="username2"/>
      <label for="password2">Password:</label>
      <input type="password" class="form-control" v-model="password2" name="password2"/>
      <button class="btn btn-primary" v-on:click="register">Register</button>
      <button class="btn btn-secondary" v-on:click="clear">Clear</button>
    </form>
  </div>
</template>

<script>
import { login, register } from '../api/auth'

export default {
  name: 'Auth',
  data() {
    return {
      username: '',
      password: '',
      username2: '',
      password2: ''
    }
  },
  methods: {
    login() {
      login(this.username, this.password)
        .then(response => {
          this.$store.commit('setToken', response.data)
          this.$router.push('/')
        })
        .catch(error => {
          this.$message.error('ERROR: ' + error.response.data.message)
        })
    },
    register() {
      register(this.username2, this.password2)
        .then(response => {
          this.$message.success('SUCCESS: ' + response.message)
        })
        .catch(error => {
          this.$message.error('ERROR: ' + error.response.data.message)
        })
    },
    clear() {
      this.username = ''
      this.password = ''
      this.username2 = ''
      this.password2 = ''
    }
  }
}
</script>

在这个Vue页面中，我们添加了登录和注册两个表单，使用v-model指令实现数据双向绑定。另外，我们定义了两个方法login()和register()用于调用后端的login和register接口，并使用$store.commit()方法将Session ID存储在Vuex中。在处理接口调用返回的结果时，我们使用了elementUI库弹出消息提示。

4. 开发后端Controller。

现在我们需要开发一个后端Controller用于处理用户注册和登录请求。下面是一个简单的Controller实现：

@RestController
@RequestMapping("/user")
public class UserController {
    
    @Autowired
    private UserService userService;
    
    /**
     * 用户注册
     */
    @PostMapping("/register")
    public Result register(@RequestBody User user) {
        userService.register(user);
        return new Result(ResultCode.OK);
    }
    
    /**
     * 用户登录
     */
    @PostMapping("/login")
    public Result login(@RequestBody User user) {
        String username = user.getUsername();
        String password = user.getPassword();
        Subject subject = SecurityUtils.getSubject();
        UsernamePasswordToken token = new UsernamePasswordToken(username, password);
        
        try {
            subject.login(token);
            return new Result(ResultCode.OK, subject.getSession().getId());
        } catch (AuthenticationException e) {
            return new Result(ResultCode.LOGIN_ERROR);
        }
    }
}

在这个UserController中，我们定义了两个接口用于处理用户注册和登录请求。对于用户注册请求，我们调用UserService的register()方法进行用户注册。对于用户登录请求，我们使用Shiro的Subject来验证用户的凭据，并返回一个带有Session ID的Result对象。

5. 开发前端API调用。

最后，我们需要开发一个前端API调用用于调用后端的login和register接口。下面是一个简单的API调用实现：

import axios from 'axios'

const BASE_URL = 'http://localhost:8080'

export function login(username, password) {
    const url = `${BASE_URL}/user/login`
    const data = { username, password }
    
    return axios.post(url, data).then(response => {
        const sessionId = response.data.data
        localStorage.setItem('sessionId', sessionId)
        return response.data
    })
}

export function register(username, password) {
    const url = `${BASE_URL}/user/register`
    const data = { username, password }
    
    return axios.post(url, data).then(response => {
        return response.data
    })
}

在这个API调用中，我们定义了login()和register()两个方法用于调用后端的login和register接口，并将Session ID存储在localStorage中。

至此，使用Shiro和Spring Boot整合实现登录和注册功能的过程已经完成了。

总结

Shiro是一个非常流行的Java安全框架，它可以提供身份验证、授权、加密和会话管理等功能。另一方面，Spring Boot是一个非常流行的Java框架，它可以提供快速、方便、灵活地构建基于Spring的应用程序的方式。
通过整合Shiro和Spring Boot，我们可以轻松地实现安全性能优秀的Java应用程序。同时，使用Vue作为前端可以更好地实现接口调用。
希望这篇文章对你有所帮助。如果你有任何问题或建议，都可以在评论区中留言。谢谢！