请求拦截加载token代码

以下是一个简单的示例，拦截请求并在每个请求中加载 token：

import axios from 'axios'

const instance = axios.create({
  baseURL: 'https://example.com/api'
})

// 在请求发送前拦截请求
instance.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token')
    if (token) {
      // 将 token 添加到请求头
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

export default instance

在这个例子中，我们使用 Axios 创建了一个实例，并添加了一个请求拦截器，这个拦截器会在每个请求发送前执行。在拦截器中，我们从 localStorage 中获取 token，然后将其添加到请求头中。

这样，在每个请求中，都会自动加载 token 信息。

相关问题

vue3 axios 全局加载token

可以在main.js中使用axios的拦截器，在请求头中添加token：

import axios from 'axios'

axios.interceptors.request.use(
config => {
const token = localStorage.getItem('token')
if (token) {
config.headers.common['Authorization'] = `Bearer ${token}`
}
return config
},
error => {
return Promise.reject(error)
}
)

然后在每个需要使用axios的组件中，直接使用axios即可。

SpringBoot+vue前端后端如何在登录后请求头上加上token，请给我写出详细具体的步骤以及代码

好的，下面是 Spring Boot 后端和 Vue.js 前端的示例代码和步骤。

1. 在 Spring Boot 后端，我们可以使用 Spring Security 框架来实现基于 token 的认证和授权。

首先，在 pom.xml 文件中添加 Spring Security 的依赖：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-security</artifactId>
</dependency>

其次，我们需要创建一个类来实现 Spring Security 的配置，例如：

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Autowired
    private UserDetailsService userDetailsService;

    @Autowired
    private JwtAuthenticationEntryPoint unauthorizedHandler;

    @Bean
    public JwtAuthenticationFilter authenticationTokenFilterBean() throws Exception {
        return new JwtAuthenticationFilter();
    }

    @Override
    protected void configure(AuthenticationManagerBuilder auth) throws Exception {
        auth.userDetailsService(userDetailsService).passwordEncoder(passwordEncoder());
    }

    @Bean
    public PasswordEncoder passwordEncoder() {
        return new BCryptPasswordEncoder();
    }

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
                .cors().and().csrf().disable()
                .exceptionHandling().authenticationEntryPoint(unauthorizedHandler).and()
                .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS).and()
                .authorizeRequests()
                .antMatchers("/api/auth/**").permitAll()
                .anyRequest().authenticated();

        // 添加 JWT token 过滤器
        http.addFilterBefore(authenticationTokenFilterBean(), UsernamePasswordAuthenticationFilter.class);
    }
}

在上面的代码中，我们配置了 Spring Security 的一些基本参数，例如：使用 BCryptPasswordEncoder 进行密码加密，实现 UserDetailsService 接口来加载用户信息，配置 JWT token 过滤器等。

2. 在用户登录成功后，生成一个 token 并返回给前端。

在 Spring Boot 后端，我们可以使用 JWT token 来实现认证和授权。在用户登录成功后，我们需要生成一个 JWT token 并返回给前端，例如：

// 生成 JWT token
String token = Jwts.builder()
        .setSubject(user.getUsername())
        .setExpiration(new Date(System.currentTimeMillis() + EXPIRATION_TIME))
        .signWith(SignatureAlgorithm.HS512, SECRET)
        .compact();

// 将 token 返回给前端
response.addHeader(HEADER_STRING, TOKEN_PREFIX + token);

在上面的代码中，我们使用 Jwts 类创建一个 JWT token，设置 token 的过期时间和签名算法，并将 token 添加到响应头中返回给前端。其中，HEADER_STRING 和 TOKEN_PREFIX 是我们自定义的常量。

3. 在前端，我们需要在请求头中添加 Authorization 字段，值为 "Bearer " + token。

在 Vue.js 前端，我们可以使用 axios 库来发送 HTTP 请求，并在请求头中添加 Authorization 字段。

首先，我们需要在 main.js 文件中设置 axios 的默认配置，例如：

import axios from 'axios'

axios.defaults.baseURL = 'http://localhost:8080/api'
axios.defaults.headers.common['Content-Type'] = 'application/json'

// 在请求头中添加 Authorization 字段
axios.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token')
    if (token) {
      config.headers.common['Authorization'] = 'Bearer ' + token
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

在上面的代码中，我们设置了 axios 的默认请求 URL 和请求头的 Content-Type。并在 axios 的请求拦截器中，判断本地存储中是否有 token，如果有，则将 token 添加到请求头的 Authorization 字段中。

4. 在后端，我们需要从请求头中解析出 token，然后使用 JWT token 进行验证和授权。

在 Spring Boot 后端，我们需要从请求头中解析出 Authorization 字段，然后使用 JWT token 进行验证和授权。

例如，在 JwtAuthenticationFilter 类中，我们可以重写 doFilterInternal 方法，从请求头中解析出 token，并将 token 传递给 JwtTokenUtil 类进行验证和授权，例如：

@Component
public class JwtAuthenticationFilter extends OncePerRequestFilter {

    @Autowired
    private JwtTokenUtil jwtTokenUtil;

    @Autowired
    private UserDetailsService userDetailsService;

    @Override
    protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain chain) throws ServletException, IOException {
        String header = request.getHeader(HEADER_STRING);
        String username = null;
        String authToken = null;
        if (header != null && header.startsWith(TOKEN_PREFIX)) {
            authToken = header.replace(TOKEN_PREFIX, "");
            try {
                username = jwtTokenUtil.getUsernameFromToken(authToken);
            } catch (IllegalArgumentException e) {
                logger.error("an error occurred during getting username from token", e);
            } catch (ExpiredJwtException e) {
                logger.warn("the token is expired and not valid anymore", e);
            }
        } else {
            logger.warn("couldn't find bearer string, will ignore the header");
        }

        if (username != null && SecurityContextHolder.getContext().getAuthentication() == null) {
            UserDetails userDetails = userDetailsService.loadUserByUsername(username);
            if (jwtTokenUtil.validateToken(authToken, userDetails)) {
                UsernamePasswordAuthenticationToken authentication = new UsernamePasswordAuthenticationToken(userDetails, null, userDetails.getAuthorities());
                authentication.setDetails(new WebAuthenticationDetailsSource().buildDetails(request));
                logger.info("authenticated user " + username + ", setting security context");
                SecurityContextHolder.getContext().setAuthentication(authentication);
            }
        }
        chain.doFilter(request, response);
    }
}

在上面的代码中，我们首先从请求头中解析出 Authorization 字段，然后使用 JwtTokenUtil 类的 getUsernameFromToken 方法解析出 token 中的用户名。接着，我们使用 UserDetailsService 接口加载用户信息，并使用 JwtTokenUtil 类的 validateToken 方法进行 token 的验证和授权。最后，我们将用户信息设置到 Spring Security 的上下文中，以便后续的请求可以进行访问控制。

至此，我们就完成了 Spring Boot 后端和 Vue.js 前端如何在登录后请求头上加上 token 的示例代码和步骤。