前端token验证 vue

本文详细介绍了如何在登录成功后,利用返回的Token进行后续接口请求的方法。通过将Token存储在localStorage中,并在每次请求时将其加入到请求头X-token中,确保了API调用的安全性和有效性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

通过登录返回的token,请求其他接口时,要把token放入请求头X-token

login.vue (登录页面,后台给的token返回到了result里面,所以我取result的值)

window.localStorage['result'] = res.data.result  //将他存到localstorage中

 

2020.3.17(更新)

token:请求登录的后台接口返回token,存到session中,登录的时候,将后台返回的token存到session中,再在请求的时候将token带过去

 

 

fetch.js

import axios from 'axios'
import { baseUrl } from './evn'
import { Message } from 'element-ui'
import router from '../router'
// import store from '../store/store'
import Qs from 'qs'

// 创建axios实例
const service = axios.create({
  baseURL: baseUrl,
  transformRequest: [
    function (data) {
      // Do whatever you want to transform the data
      return Qs.stringify(data)
    }
  ] // maxContentLength: ''
})

// request拦截器
service.interceptors.request.use(
  config => {
    let token = localStorage.getItem('result')
    if (token) {
      config.headers['X-token'] = token
    }
    return config
  },
  err => {
    return Promise.reject(err)
  }
)

// respone拦截器
service.interceptors.response.use(
  res => {
    if (res.data.result === -102) {
      localStorage.removeItem('result')
      router.replace('/login')
    }
    return res
  },
  err => {
    Message({
      showClose: true,
      message: '服务器有事离开一下,马上就回来',
      type: 'error'
    })
    return Promise.reject(err)
  }
)

export default service

 

<think>嗯,用户现在询问的是Vue前端如何生成token,之前的问题是关于OpenResty中处理POST请求的token验证,现在转向了前端实现。从引用的内容来看,用户可能接触过双token机制(access_token和refresh_token),也看到了Vue中处理token认证的代码片段。用户可能正在开发一个需要用户登录的Vue应用,现在卡在了token生成和管理的环节。ta的困惑点可能在于:1)token具体怎么产生的;2)怎么集成到Vue项目中。虽然引用里提到了SpringBoot+vue的方案,但用户明确问了前端生成,说明更关注客户端实现。注意到引用[2][3]都提到localStorage存储token的方式,这是个关键线索。不过要提醒用户注意安全性问题,引用[2]特别强调了HttpOnly和HTTPS,这点在回答时要重点强调。用户身份推测是有Vue基础但缺乏身份验证实战经验的开发者。ta应该需要清晰的步骤指导,最好附带可运行的代码示例。考虑到之前ta在OpenResty配置上提过专业问题,回答可以适当深入技术细节。核心需要解答三个层次:1)token本质是什么(JWT结构)2)具体生成方法(哪些库可用)3)在Vue中的集成流程(请求拦截)。安全事项要单独列出,因为引用[2]特别提过这点。双token机制需要完整说明刷新流程,引用[1]提到过这个机制值得展开。用流程图表现双token流程会很直观,因为涉及两个token的时序配合。代码示例优先选jwt-decode+axios方案,这是最主流的组合。要特别注意区分开发环境和生产环境的安全措施差异。</think> 在 Vue 前端框架中,"生成 token"通常指通过登录流程从后端获取 token 并管理其生命周期。以下是完整的实现流程和代码示例: --- ### Vue 前端获取和管理 Token 的步骤 #### 1. 用户登录请求 ```javascript // Login.vue import axios from 'axios'; export default { data() { return { username: '', password: '' } }, methods: { async submitLogin() { try { const response = await axios.post('/api/auth/login', { username: this.username, password: this.password }); // 从响应中获取 token const { access_token, refresh_token } = response.data; // 存储 token localStorage.setItem('access_token', access_token); localStorage.setItem('refresh_token', refresh_token); this.$router.push('/dashboard'); } catch (error) { console.error('登录失败:', error.response.data); } } } } ``` #### 2. Token 存储策略(关键安全实践) | **存储位置** | **优点** | **缺点** | **推荐场景** | |--------------------|-----------------------------|-----------------------------------|----------------------| | `HttpOnly Cookie` | 防 XSS 攻击 | 需跨域配置 (withCredentials) | 企业级应用 | | `localStorage` | 简单易用 | 易受 XSS 攻击 | 开发环境/内部应用 | | `Vuex + 内存存储` | 刷新页面即失效 | 需配合 keep-alive | 高安全性要求场景 | > **安全建议**:生产环境必须使用 HTTPS + HttpOnly Cookie[^2] #### 3. 自动附加 Token 到请求头 ```javascript // src/utils/axios.js import axios from 'axios'; const api = axios.create({ baseURL: process.env.VUE_APP_API_URL }); // 请求拦截器 api.interceptors.request.use(config => { const token = localStorage.getItem('access_token'); if (token) { config.headers.Authorization = `Bearer ${token}`; } return config; }); export default api; ``` #### 4. 实现双 Token 刷新机制 ```mermaid sequenceDiagram participant Vue as 前端 participant Auth as 认证服务 Vue->>Auth: 请求API (带过期access_token) Auth-->>Vue: 返回401错误 Vue->>Auth: 使用refresh_token请求刷新 Auth->>Auth: 验证refresh_token有效性 Auth-->>Vue: 返回新access_token Vue->>Auth: 用新token重试原请求 ``` ```javascript // 响应拦截器 - 处理token刷新 api.interceptors.response.use( response => response, async error => { const originalRequest = error.config; // 检测token过期 if (error.response.status === 401 && !originalRequest._retry) { originalRequest._retry = true; // 刷新token const refreshToken = localStorage.getItem('refresh_token'); const refreshResponse = await axios.post('/api/auth/refresh', { refresh_token: refreshToken }); // 存储新token localStorage.setItem('access_token', refreshResponse.data.access_token); // 重试原始请求 originalRequest.headers.Authorization = `Bearer ${refreshResponse.data.access_token}`; return api(originalRequest); } return Promise.reject(error); } ); ``` #### 5. 路由守卫控制访问权限 ```javascript // src/router/authGuard.js export default { requiresAuth: (to, from, next) => { const accessToken = localStorage.getItem('access_token'); if (!accessToken) { next({ path: '/login', query: { redirect: to.fullPath } }); } else { next(); } } } // 路由配置 { path: '/dashboard', component: Dashboard, meta: { requiresAuth: true } } ``` #### 6. 主动处理 Token 失效 ```javascript // 用户主动退出 logout() { // 清除所有token localStorage.removeItem('access_token'); localStorage.removeItem('refresh_token'); // 强制清除HTTP客户端缓存 axios.defaults.headers.common['Authorization'] = ''; this.$router.push('/login'); } ``` --- ### 安全增强措施 1. **Token 自动续期** 在 token 过期前 5 分钟自动刷新: ```javascript setInterval(() => { const expires = jwtDecode(localStorage.access_token).exp; if (Date.now()/1000 > expires - 300) { // 提前5分钟刷新 refreshToken(); } }, 60000); // 每分钟检查 ``` 2. **CSRF 防护** 在 header 中加入动态 token: ```javascript axios.defaults.headers.common['X-CSRF-Token'] = getCSRFToken(); ``` 3. **敏感操作二次验证** 关键操作需短信/邮箱验证: ```javascript async transferFunds(amount) { await this.verifyAction('transfer'); // 触发二次验证 // 执行转账... } ``` --- ### 常见问题解决方案 | **问题场景** | **解决方案** | |--------------------------|---------------------------------------------| | 页面刷新导致 Vuex 数据丢失 | 结合 localStorage + 初始化同步 | | 多标签页登录状态同步 | 监听 storage 事件实现跨页通信 | | 服务端强制 token 失效 | 401 错误时检查返回体中的 invalid_session 标志 | | 应用唤醒时 token 更新 | 在 app.vue 的 mounted 中检查 token 状态 | > **性能提示**:大流量场景应使用无状态 token 方案减轻服务端压力[^1] --- ### 最佳实践建议 1. 使用 `vuex-persistedstate` 实现状态持久化 2. 通过环境变量动态配置 token 有效期 3. 每次刷新 token 时更新 `last_active` 时间戳 4. 使用 `navigator.sendBeacon` 在页面关闭前发送注销请求 --- ### 补充阅读 1. [Vue官方状态管理指南](https://vuejs.org/guide/scaling-up/state-management.html) 2. [OWASP JWT 安全指南](https://cheatsheetseries.owasp.org/cheatsheets/JSON_Web_Token_Cheat_Sheet.html)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值