前端如何传递token

前端传递token的核心步骤包括：存储token、将token附加到请求头、使用中间件进行请求拦截、确保安全性。其中，将token附加到请求头是最重要的一点，因为这是确保每个请求都能被正确地验证和授权的关键步骤。

在现代Web开发中，前端传递token通常用于验证用户身份并保护API资源。首先，token一般存储在浏览器的本地存储或cookie中，然后在每次请求时将其附加到请求头。这个过程可以通过前端框架（如React、Angular、Vue等）中的拦截器或中间件来自动化处理。确保token的安全性也非常重要，例如避免将其暴露在URL中，防止跨站请求伪造（CSRF）等攻击。

一、存储token

在前端应用程序中，存储token的方式有多种选择，通常包括本地存储（localStorage）、会话存储（sessionStorage）和cookie。

1、localStorage

localStorage是一种持久化的存储方式，即使用户关闭浏览器，存储的数据也不会丢失。使用localStorage存储token的代码示例如下：

// 存储token
localStorage.setItem('token', 'your-jwt-token');
// 读取token
const token = localStorage.getItem('token');

2、sessionStorage

sessionStorage只在浏览器会话期间有效，浏览器关闭后数据会被清除。使用sessionStorage存储token的代码示例如下：

// 存储token
sessionStorage.setItem('token', 'your-jwt-token');
// 读取token
const token = sessionStorage.getItem('token');

3、cookie

使用cookie存储token可以指定过期时间，并且可以设置HttpOnly属性来防止客户端脚本访问。代码示例如下：

// 设置cookie
document.cookie = "token=your-jwt-token; expires=Fri, 31 Dec 2021 23:59:59 GMT; path=/";
// 读取cookie
const getCookie = (name) => {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop().split(';').shift();
};
const token = getCookie('token');

二、将token附加到请求头

为了在每次请求时都能验证用户身份，需要将token附加到请求头中。通常是在每个请求的Authorization头中加入Bearer token。

1、使用Axios拦截器

如果使用Axios发送请求，可以利用拦截器在请求发送前自动附加token：

import axios from 'axios';
// 创建axios实例
const instance = axios.create({
    baseURL: 'https://api.example.com',
});
// 请求拦截器
instance.interceptors.request.use(config => {
    const token = localStorage.getItem('token');
    if (token) {
        config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
}, error => {
    return Promise.reject(error);
});
export default instance;

2、使用Fetch API

如果使用Fetch API发送请求，可以手动在请求头中添加token：

const token = localStorage.getItem('token');
fetch('https://api.example.com/data', {
    method: 'GET',
    headers: {
        'Authorization': `Bearer ${token}`,
        'Content-Type': 'application/json'
    }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

三、使用中间件进行请求拦截

在前端框架中，可以使用中间件或插件来自动处理请求拦截和token附加。例如，在Vue.js中可以使用Vuex和Vue Router来管理token和拦截请求。

1、Vuex和Axios

在Vuex中创建一个模块来管理token，并在Axios中设置请求拦截器：

// store.js
import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';
Vue.use(Vuex);
const store = new Vuex.Store({
    state: {
        token: localStorage.getItem('token') || ''
    },
    mutations: {
        setToken(state, token) {
            state.token = token;
            localStorage.setItem('token', token);
        },
        clearToken(state) {
            state.token = '';
            localStorage.removeItem('token');
        }
    },
    actions: {
        login({ commit }, token) {
            commit('setToken', token);
        },
        logout({ commit }) {
            commit('clearToken');
        }
    }
});
// 设置axios请求拦截器
axios.interceptors.request.use(config => {
    const token = store.state.token;
    if (token) {
        config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
}, error => {
    return Promise.reject(error);
});
export default store;

2、Vue Router导航守卫

在Vue Router中，可以使用导航守卫来检查token，并在需要时重定向用户：

// router.js
import Vue from 'vue';
import Router from 'vue-router';
import store from './store';
Vue.use(Router);
const router = new Router({
    routes: [
        {
            path: '/login',
            component: () => import('./views/Login.vue')
        },
        {
            path: '/dashboard',
            component: () => import('./views/Dashboard.vue'),
            meta: { requiresAuth: true }
        }
    ]
});
router.beforeEach((to, from, next) => {
    const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
    const token = store.state.token;
    if (requiresAuth && !token) {
        next('/login');
    } else {
        next();
    }
});
export default router;

四、确保安全性

安全性是前端传递token时的一个重要考虑因素。以下是一些推荐的做法：

1、使用HTTPS

确保所有请求都通过HTTPS发送，以防止token在传输过程中被窃取。

2、设置HttpOnly和Secure属性

如果使用cookie存储token，设置HttpOnly和Secure属性以防止客户端脚本访问和确保cookie只能通过HTTPS传输：

document.cookie = "token=your-jwt-token; expires=Fri, 31 Dec 2021 23:59:59 GMT; path=/; Secure; HttpOnly";

3、防止CSRF攻击

使用CSRF令牌来保护表单提交和其他敏感操作。可以在服务器端生成一个随机的CSRF令牌，并在前端应用程序中将其附加到每个请求中。

4、定期刷新token

使用刷新token机制，定期刷新用户的token，以减少长期使用同一个token的风险。刷新token通常具有较长的有效期，而访问token则较短。

// 示例：刷新token
const refreshToken = async () => {
    try {
        const response = await axios.post('https://api.example.com/refresh-token', {
            token: localStorage.getItem('refreshToken')
        });
        localStorage.setItem('token', response.data.token);
    } catch (error) {
        console.error('Error refreshing token:', error);
    }
};

五、示例项目与工具推荐

在实际项目中，使用项目管理系统可以帮助团队更好地协作和管理任务。以下是两个推荐的项目管理系统：

1、研发项目管理系统PingCode

PingCode是一款专为研发团队设计的项目管理系统，提供了全面的项目管理功能，包括需求管理、任务跟踪、缺陷管理和版本控制等。它支持敏捷开发和瀑布开发等多种开发模式，能够帮助团队提高效率和协作水平。

2、通用项目协作软件Worktile

Worktile是一款通用的项目协作软件，适用于各种类型的项目和团队。它提供了任务管理、时间管理、文档协作和即时通讯等功能，可以帮助团队更好地沟通和协作，提高工作效率。

结论

前端传递token是实现用户身份验证和保护API资源的重要手段。通过正确存储token、将token附加到请求头、使用中间件进行请求拦截和确保安全性，可以有效地保护应用程序和用户数据。在实际项目中，使用项目管理系统如PingCode和Worktile可以帮助团队更好地管理任务和协作，提高工作效率。