前端如何处理token逻辑

Token逻辑处理的核心在于：安全存储、自动刷新、统一管理。 其中，安全存储是确保token不被恶意访问或篡改的关键；自动刷新则是为了保证用户体验和系统安全性；统一管理能减少代码冗余，提高代码维护性。接下来，我们将详细探讨前端如何高效、安全地处理token逻辑。

一、安全存储

在前端应用中，安全地存储token是至关重要的。常见的存储位置包括：本地存储、会话存储、HTTP-only Cookies。每种存储方式都有其优缺点。

1、本地存储

本地存储（Local Storage）是一种基于浏览器的存储方式，它能够在用户关闭浏览器后仍然保存数据。尽管本地存储使用方便，但它容易受到XSS攻击的威胁。开发者需要确保应用程序的安全性以避免XSS攻击。

2、会话存储

会话存储（Session Storage）与本地存储类似，但它仅在当前会话期间有效，一旦关闭浏览器标签页或窗口，数据就会被清除。与本地存储相比，会话存储更安全，但它也同样容易受到XSS攻击。

3、HTTP-only Cookies

HTTP-only Cookies是一种更为安全的存储方式，因为它们不能被JavaScript访问。这在防止XSS攻击时非常有用。然而，Cookies有大小限制，并且每次请求都会携带，这可能会影响性能。

二、自动刷新

Token通常有有效期，为了保证用户体验，前端需要在token过期前进行刷新。常用的刷新策略包括：定时器刷新、后台刷新。

1、定时器刷新

定时器刷新是指在token快要过期时，通过定时器自动发起请求刷新token。具体实现步骤如下：

获取token的有效期（如从token的payload中解析exp字段）。
设置定时器，在token即将过期时触发刷新请求。
更新token和定时器。

2、后台刷新

后台刷新是指在用户进行操作时，检测token是否即将过期，如果是，则自动发起刷新请求。这种方式可以减少不必要的请求，但需要在每次用户操作时进行检测。

三、统一管理

为了减少代码冗余，提高代码维护性，前端需要对token进行统一管理。可以通过封装API请求、使用状态管理工具来实现。

1、封装API请求

通过封装API请求，可以在请求前后对token进行统一处理。具体实现步骤如下：

创建一个API请求封装函数。
在请求前，检查token是否存在和有效。
在请求后，处理token的更新或刷新逻辑。

2、使用状态管理工具

状态管理工具（如Redux、Vuex）可以帮助前端统一管理token。具体步骤如下：

在状态管理工具中创建token的状态和相关操作。
在组件中通过状态管理工具获取和更新token。
在API请求封装函数中，调用状态管理工具的相关操作。

四、结合实际开发案例

为了更好地理解前端如何处理token逻辑，我们结合实际开发案例进行说明。

1、使用本地存储和定时器刷新

假设我们有一个前端应用，需要使用本地存储存储token，并在token即将过期时自动刷新。具体实现步骤如下：

在用户登录时，将token存储到本地存储。
解析token的有效期，并设置定时器。
在定时器触发时，发起刷新请求并更新token和定时器。

// 登录时存储token
function login(token) {
  localStorage.setItem('token', token);
  const exp = parseToken(token).exp;
  setRefreshTimer(exp);
}
// 解析token获取有效期
function parseToken(token) {
  const payload = JSON.parse(atob(token.split('.')[1]));
  return payload;
}
// 设置定时器
function setRefreshTimer(exp) {
  const refreshTime = exp * 1000 - Date.now() - 60000; // 提前1分钟刷新
  setTimeout(refreshToken, refreshTime);
}
// 刷新token
function refreshToken() {
  // 发起刷新请求
  fetch('/api/refresh-token', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${localStorage.getItem('token')}`,
    },
  })
  .then(response => response.json())
  .then(data => {
    login(data.token); // 更新token和定时器
  });
}

2、使用HTTP-only Cookies和后台刷新

假设我们有一个前端应用，需要使用HTTP-only Cookies存储token，并在用户操作时自动刷新token。具体实现步骤如下：

在用户登录时，将token存储到HTTP-only Cookies。
在每次用户操作时，检测token是否即将过期。
如果token即将过期，发起刷新请求并更新token。

// 登录时存储token
function login(token) {
  document.cookie = `token=${token}; HttpOnly`;
}
// 检测token是否即将过期
function checkToken() {
  const token = getCookie('token');
  const exp = parseToken(token).exp;
  if (exp * 1000 - Date.now() < 60000) { // 提前1分钟刷新
    refreshToken();
  }
}
// 获取cookie
function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}
// 刷新token
function refreshToken() {
  // 发起刷新请求
  fetch('/api/refresh-token', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${getCookie('token')}`,
    },
  })
  .then(response => response.json())
  .then(data => {
    login(data.token); // 更新token
  });
}

五、提高代码可维护性的策略

为了提高代码的可维护性和可读性，我们可以采取一些策略，如模块化、注释、使用第三方库。

1、模块化

通过将token逻辑封装到独立的模块，可以提高代码的可维护性和可读性。具体步骤如下：

创建一个token管理模块，包含token的存储、刷新和检测逻辑。
在需要使用token的地方，导入token管理模块。

// token管理模块
const tokenManager = {
  login: function(token) {
    localStorage.setItem('token', token);
    const exp = this.parseToken(token).exp;
    this.setRefreshTimer(exp);
  },
  parseToken: function(token) {
    const payload = JSON.parse(atob(token.split('.')[1]));
    return payload;
  },
  setRefreshTimer: function(exp) {
    const refreshTime = exp * 1000 - Date.now() - 60000; // 提前1分钟刷新
    setTimeout(this.refreshToken, refreshTime);
  },
  refreshToken: function() {
    // 发起刷新请求
    fetch('/api/refresh-token', {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${localStorage.getItem('token')}`,
      },
    })
    .then(response => response.json())
    .then(data => {
      this.login(data.token); // 更新token和定时器
    });
  }
};
// 登录时使用token管理模块
tokenManager.login(token);

2、注释

良好的注释可以提高代码的可读性和可维护性。在关键逻辑处添加注释，说明代码的功能和实现思路。

// 登录时存储token
function login(token) {
  // 将token存储到本地存储
  localStorage.setItem('token', token);
  // 解析token的有效期
  const exp = parseToken(token).exp;
  // 设置定时器，在token即将过期时刷新
  setRefreshTimer(exp);
}

3、使用第三方库

使用成熟的第三方库可以减少开发成本，提高代码的稳定性和安全性。例如，axios 是一个流行的HTTP请求库，支持拦截器，可以方便地处理token的存储和刷新。

import axios from 'axios';
// 创建axios实例
const api = axios.create({
  baseURL: '/api',
  headers: {
    'Content-Type': 'application/json',
  },
});
// 请求拦截器
api.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers['Authorization'] = `Bearer ${token}`;
  }
  return config;
}, error => {
  return Promise.reject(error);
});
// 响应拦截器
api.interceptors.response.use(response => {
  return response;
}, error => {
  const status = error.response ? error.response.status : null;
  if (status === 401) {
    // token过期，发起刷新请求
    return refreshToken().then(() => {
      // 重新发起原始请求
      error.config.headers['Authorization'] = `Bearer ${localStorage.getItem('token')}`;
      return axios.request(error.config);
    });
  }
  return Promise.reject(error);
});
// 刷新token
function refreshToken() {
  return axios.post('/api/refresh-token', {}, {
    headers: {
      'Authorization': `Bearer ${localStorage.getItem('token')}`,
    },
  })
  .then(response => {
    const token = response.data.token;
    localStorage.setItem('token', token);
  });
}

六、实际项目中的应用

在实际项目中，处理token逻辑时，可能还需要考虑其他问题，如多标签页同步、跨域请求、权限控制。

1、多标签页同步

在多标签页中操作时，需要确保token在所有标签页中同步更新。可以使用Local Storage事件监听来实现。

// 监听Local Storage变化
window.addEventListener('storage', (event) => {
  if (event.key === 'token') {
    const token = event.newValue;
    // 更新当前标签页的token
    if (token) {
      tokenManager.login(token);
    }
  }
});

2、跨域请求

在进行跨域请求时，需要确保token能够正确携带。可以在服务器端设置CORS策略，允许特定域名的请求，并在前端请求时携带凭证。

// 设置CORS策略（服务器端）
app.use(cors({
  origin: 'https://example.com',
  credentials: true,
}));
// 前端请求时携带凭证
fetch('/api/data', {
  method: 'GET',
  credentials: 'include',
  headers: {
    'Authorization': `Bearer ${localStorage.getItem('token')}`,
  },
})
.then(response => response.json())
.then(data => {
  console.log(data);
});

3、权限控制

在前端应用中，可能需要根据用户的权限来显示不同的内容或功能。可以在解析token时，获取用户的权限信息，并在前端进行权限控制。

// 解析token获取权限信息
function parseToken(token) {
  const payload = JSON.parse(atob(token.split('.')[1]));
  return {
    exp: payload.exp,
    roles: payload.roles, // 用户权限信息
  };
}
// 根据权限控制显示内容
function renderContent() {
  const token = localStorage.getItem('token');
  const { roles } = parseToken(token);
  if (roles.includes('admin')) {
    // 显示管理员内容
  } else {
    // 显示普通用户内容
  }
}