当前位置：首页 > VUE

vue shiro实现登录

2026-02-17 15:03:03VUE

Vue 与 Shiro 实现登录功能

Vue 作为前端框架与 Shiro 作为后端安全框架结合，可以实现安全的登录认证。以下是具体实现步骤：

前端 Vue 部分

创建登录页面 使用 Vue 创建登录表单，包含用户名和密码输入框以及登录按钮。通过 Axios 发送登录请求到后端。

<template>
  <div>
    <input v-model="username" placeholder="用户名">
    <input v-model="password" type="password" placeholder="密码">
    <button @click="login">登录</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login() {
      axios.post('/api/login', {
        username: this.username,
        password: this.password
      }).then(response => {
        // 处理登录成功逻辑
      }).catch(error => {
        // 处理错误
      });
    }
  }
}
</script>

处理登录状态 登录成功后，保存 token 到 localStorage 或 Vuex 中，用于后续请求的认证。

localStorage.setItem('token', response.data.token);

请求拦截器 通过 Axios 拦截器，在每次请求时携带 token。

axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

后端 Shiro 部分

配置 Shiro 在 Spring Boot 中配置 Shiro，定义 Realm 和过滤器。

@Configuration
public class ShiroConfig {
    @Bean
    public ShiroFilterFactoryBean shiroFilterFactoryBean(DefaultWebSecurityManager securityManager) {
        ShiroFilterFactoryBean factoryBean = new ShiroFilterFactoryBean();
        factoryBean.setSecurityManager(securityManager);

        Map<String, String> filterMap = new LinkedHashMap<>();
        filterMap.put("/api/login", "anon");
        filterMap.put("/", "authc");
        factoryBean.setFilterChainDefinitionMap(filterMap);

        return factoryBean;
    }

    @Bean
    public DefaultWebSecurityManager securityManager(MyRealm realm) {
        DefaultWebSecurityManager securityManager = new DefaultWebSecurityManager();
        securityManager.setRealm(realm);
        return securityManager;
    }
}

自定义 Realm 实现自定义 Realm 进行认证和授权逻辑。

public class MyRealm extends AuthorizingRealm {
    @Override
    protected AuthenticationInfo doGetAuthenticationInfo(AuthenticationToken token) throws AuthenticationException {
        UsernamePasswordToken upToken = (UsernamePasswordToken) token;
        String username = upToken.getUsername();
        String password = new String(upToken.getPassword());

        // 验证用户名和密码
        if (!"admin".equals(username) || !"123456".equals(password)) {
            throw new AuthenticationException("用户名或密码错误");
        }

        return new SimpleAuthenticationInfo(username, password, getName());
    }

    @Override
    protected AuthorizationInfo doGetAuthorizationInfo(PrincipalCollection principals) {
        // 授权逻辑
        return null;
    }
}

登录接口 创建登录接口，Shiro 进行认证后返回 token。

@RestController
public class LoginController {
    @PostMapping("/api/login")
    public ResponseEntity<?> login(@RequestBody LoginRequest request) {
        Subject subject = SecurityUtils.getSubject();
        UsernamePasswordToken token = new UsernamePasswordToken(request.getUsername(), request.getPassword());

        try {
            subject.login(token);
            String sessionId = (String) subject.getSession().getId();
            return ResponseEntity.ok().body(new LoginResponse(sessionId));
        } catch (AuthenticationException e) {
            return ResponseEntity.status(401).body("登录失败");
        }
    }
}

安全注意事项

使用 HTTPS 加密传输数据，避免密码明文传输。
后端应对密码进行哈希处理，避免明文存储。
实现合理的会话超时机制。
前端应对敏感信息进行适当保护，避免 XSS 攻击。

跨域问题处理

如果前后端分离部署，需要处理跨域问题。

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/")
                .allowedOrigins("*")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*")
                .exposedHeaders("Authorization")
                .allowCredentials(true)
                .maxAge(3600);
    }
}

通过以上步骤，可以实现 Vue 前端与 Shiro 后端的登录认证功能。根据实际需求，可以进一步扩展权限控制、记住我功能等。

vue shiro实现登录