vue的token存储

### 如何在 Vuex 中存储 Vue 应用的 Token #### 创建 Vuex Store 并定义 State 和 Mutations 为了管理全局状态，在 Vuex store 中创建一个新的实例并配置 `state` 来保存 token。同时，定义一个 mutation 用于更新此 token。 ```javascript import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ state: { token: '' }, mutations: { SET_TOKEN(state, newToken) { state.token = newToken; } } }); ``` 这段代码初始化了一个 Vuex store 实例，并设置了初始状态下 token 字段为空字符串；还定义了名为 `SET_TOKEN` 的 mutation 函数来改变 token 值[^2]。 #### 使用 Actions 处理异步操作 当涉及到网络请求或其他异步逻辑时，应该利用 action 来触发相应的 mutation。下面是一个例子展示如何编写登录成功的回调函数： ```javascript actions: { loginFn({ commit }, token) { return new Promise((resolve, reject) => { try { // 执行一些业务逻辑... // 成功后提交mutation设置token commit('SET_TOKEN', token); resolve(); } catch (error) { reject(error); } }); } } ``` 这里展示了如何通过调用 `commit()` 方法传递参数给 mutation，从而安全地修改应用的状态[^3]。 #### 请求拦截器中自动附加 Authorization Header 为了让每次 HTTP 请求都携带有效的认证信息，可以在 Axios 或其他 HTTP 客户端库上添加请求拦截器。这样可以确保即使页面刷新也能保持用户的登录状态不变。 ```javascript // 导入store模块以便于访问其中的数据 import store from '@/store'; service.interceptors.request.use( config => { const token = store.state.user.token; if (token) { config.headers['Authorization'] = `Bearer ${token}`; } return config; }, error => { return Promise.reject(error); } ); ``` 上述片段说明了怎样读取存储在 Vuex 中的 token，并将其作为 Bearer 认证头的一部分加入到每一个发出的 API 请求当中[^4]。

### Token认证机制概述 Token认证是一种基于令牌的身份验证方法，允许客户端通过发送包含用户身份信息的安全令牌来访问受保护资源。这种方式具有无状态性和良好的可扩展性特点[^1]。 ### Spring Boot后端实现 #### 创建JWT工具类 为了便于操作JSON Web Tokens (JWT)，可以创建一个名为`JwtUtil.java`的实用程序类： ```java import io.jsonwebtoken.Claims; import io.jsonwebtoken.Jwts; import io.jsonwebtoken.SignatureAlgorithm; public class JwtUtil { private String secret = "yourSecretKey"; public String generateToken(String username) { return Jwts.builder() .setSubject(username) .signWith(SignatureAlgorithm.HS256, secret) .compact(); } public Boolean validateToken(String token, String usernameFromToken) { final String username = getUsernameFromToken(token); return (username.equals(usernameFromToken) && !isTokenExpired(token)); } // Other methods like extracting claims or checking expiration... } ``` 此代码片段展示了如何构建并签名一个新的JWT实例。 #### 设置过滤器拦截请求 为了让应用程序能够识别携带有效token的HTTP请求，在Spring Security配置中加入自定义过滤器是非常必要的： ```java @Component public class JwtRequestFilter extends OncePerRequestFilter { @Autowired private MyUserDetailsService userDetailsService; @Autowired private JwtUtil jwtUtil; @Override protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain chain) throws ServletException, IOException { final String authorizationHeader = request.getHeader("Authorization"); String username = null; String jwt = null; if (authorizationHeader != null && authorizationHeader.startsWith("Bearer ")) { jwt = authorizationHeader.substring(7); try{ username = jwtUtil.getUsernameFromToken(jwt); }catch(IllegalArgumentException e){ System.out.println("Unable to get JWT Token"); } catch(JWTVerificationException e){ System.out.println("Failed to parse the token"); } } if (username != null && SecurityContextHolder.getContext().getAuthentication() == null) { UserDetails userDetails = this.userDetailsService.loadUserByUsername(username); if (jwtUtil.validateToken(jwt, userDetails.getUsername())) { UsernamePasswordAuthenticationToken authentication = new UsernamePasswordAuthenticationToken( userDetails, null, userDetails.getAuthorities()); authentication.setDetails(new WebAuthenticationDetailsSource().buildDetails(request)); SecurityContextHolder.getContext().setAuthentication(authentication); } } chain.doFilter(request, response); } } ``` 这段逻辑负责解析传入请求头中的授权字段，并利用之前提到过的`JwtUtil`对象来进行有效性校验。 ### Vue前端集成 对于前端部分，则主要集中在登录页面以及后续每次API调用前附加已获取到的手动管理token上。这里给出一个简单的例子说明怎样在成功登陆之后保存返回来的access_token至本地存储内以便下次自动填充： ```javascript // Login.vue component method section methods: { async login() { const res = await axios.post('/api/authenticate', { email: '[email protected]', password: 'password' }); localStorage.setItem('accessToken', res.data.accessToken); // Store access token locally router.push({ name: 'Home' }); // Redirect after successful log-in }, logout(){ localStorage.removeItem('accessToken'); // Clear stored token on sign out router.push({name:'Login'}); }, fetchProtectedResource(){ let config = {'headers': {}}; if(localStorage.getItem('accessToken')){ config.headers['Authorization'] = `Bearer ${localStorage.getItem('accessToken')}`; } axios.get('/api/secured-endpoint',config).then(response => console.log(response)).catch(error=>console.error(error)) } } ``` 上述脚本实现了基本的功能需求——即当用户提交表单数据给服务器完成鉴权流程后，会收到由服务端颁发的新鲜出炉的token；随后将其妥善保管起来供未来发起其他受限接口请求时所用[^2]。