当前位置：首页 > VUE

vue shiro实现登录

2026-01-16 22:29:36VUE

Vue 与 Shiro 实现登录的整合方案

Vue 作为前端框架，Shiro 作为 Java 后端的安全框架，实现登录需要前后端协作。以下是具体实现步骤：

前端 Vue 实现登录逻辑

创建登录表单组件
使用 Vue 的模板语法构建登录表单，包含用户名和密码输入框，以及提交按钮。

<template>
  <form @submit.prevent="handleLogin">
    <input v-model="username" placeholder="用户名" />
    <input v-model="password" type="password" placeholder="密码" />
    <button type="submit">登录</button>
  </form>
</template>

处理登录请求
通过 Axios 或其他 HTTP 客户端向后端发送登录请求，携带用户名和密码。

methods: {
  handleLogin() {
    axios.post('/api/login', {
      username: this.username,
      password: this.password
    }).then(response => {
      // 登录成功处理
      localStorage.setItem('token', response.data.token);
      this.$router.push('/dashboard');
    }).catch(error => {
      console.error('登录失败', error);
    });
  }
}

存储 Token 并跳转
登录成功后，将返回的 Token 存储到本地（如 localStorage），并跳转到主页或受保护的路由。

后端 Shiro 实现认证逻辑

配置 Shiro 过滤器
在 Spring Boot 中配置 Shiro 的过滤器链，确保 /api/login 路径允许匿名访问，其他路径需要认证。

@Bean
public ShiroFilterFactoryBean shiroFilterFactoryBean(DefaultWebSecurityManager securityManager) {
    ShiroFilterFactoryBean factoryBean = new ShiroFilterFactoryBean();
    factoryBean.setSecurityManager(securityManager);
    Map<String, String> filterChainDefinitionMap = new LinkedHashMap<>();
    filterChainDefinitionMap.put("/api/login", "anon");
    filterChainDefinitionMap.put("/", "authc");
    factoryBean.setFilterChainDefinitionMap(filterChainDefinitionMap);
    return factoryBean;
}

实现登录接口
创建登录接口，接收用户名和密码，调用 Shiro 的 Subject.login 进行认证。

vue shiro实现登录

@PostMapping("/api/login")
public ResponseEntity<?> login(@RequestBody LoginRequest loginRequest) {
    Subject subject = SecurityUtils.getSubject();
    UsernamePasswordToken token = new UsernamePasswordToken(
        loginRequest.getUsername(),
        loginRequest.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("认证失败");
    }
}

自定义 Realm
实现 AuthorizingRealm，重写 doGetAuthenticationInfo 方法，从数据库或其他数据源验证用户信息。

public class CustomRealm extends AuthorizingRealm {
    @Override
    protected AuthenticationInfo doGetAuthenticationInfo(AuthenticationToken token) throws AuthenticationException {
        UsernamePasswordToken upToken = (UsernamePasswordToken) token;
        String username = upToken.getUsername();
        User user = userService.findByUsername(username);
        if (user == null) {
            throw new UnknownAccountException("用户不存在");
        }
        return new SimpleAuthenticationInfo(user.getUsername(), user.getPassword(), getName());
    }
}

跨域与 Token 验证

解决跨域问题
在 Spring Boot 中配置跨域支持，确保 Vue 前端可以访问后端接口。

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

Token 验证机制
使用 Shiro 的 DefaultWebSessionManager 或 JWT 实现无状态认证。例如，将 Token 放在请求头中，后端通过过滤器验证。

public class TokenFilter extends AccessControlFilter {
    @Override
    protected boolean isAccessAllowed(ServletRequest request, ServletResponse response, Object mappedValue) {
        String token = getRequestToken((HttpServletRequest) request);
        if (token == null) {
            return false;
        }
        return validateToken(token);
    }
}