uniapp中token操作：存储、获取、失效处理。-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp中token操作：存储、获取、失效处理。。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

实现代码

存储token:uni.setStorageSync('token', res.data.result);
获取token:uni.getStorageSync('token');
清除token：uni.setStorageSync('token', '');

应用场景

在登录操作中，保存token

	pwdLogin() {
		....
				this.$axios.request({
					url: '.....',
					method: 'post',
					params: {
						username: this.username,
						password: this.password,
						...
					}
				}).then(res => {
					if (res.data.code !== 200) {
						uni.showToast({
							title: '登录失败',
							icon: 'error',
							duration: 2000
						})
					} else {
						// 保存 token
						uni.setStorageSync('token', res.data.result);
						// 保存用户信息到本地
						this.getUserInfo();
						// 登录成功  跳转结构物页面
						uni.switchTab({
							url: '../list/list',
							fail(e) {
								console.error(e);
							}
						})
					}

				})
			},

请求头中获取token携带

/**
 * 全局配置
 * 只能配置 静态数据
 * `content-type` 默认为 application/json
 * `header` 中`content-type`设置特殊参数 或 配置其他会导致触发 跨域 问题，出现跨域会直接进入响应拦截器的catch函数中
 */
export const config = {
	baseURL: "http://xxxx.com:8000/",
	header: {
		accessToken: uni.getStorageSync('token'),
		contentType: "application/x-www-form-urlencoded",
		// Content-Type: 'application/json'
		// 'Content-Type': 'application/json'
	}
};

响应拦截器中处理token失效

/**
 * 全局 响应拦截器, 支持添加多个拦截器
 * 例如: 根据状态码选择性拦截、过滤转换数据
 *
 * `return res` 继续返回数据
 * `return false` 停止返回数据，不会进入错误数据拦截，也不会进入catch函数中
 * `return Promise.reject('xxxxx')` 返回错误信息, 会错误数据拦截，也会进入catch函数中
 *
 * @param {Object} res 请求返回的数据
 * @param {Object} config 发送请求的配置数据
 * @return {Object|Boolean|Promise<reject>}
 */
globalInterceptor.response.use(
	(res, config) => {
		// token失效处理
		if (res.data.code === 401) {
			// 登录已失效，请重新登录
			uni.showToast({
				title: '登录已失效，请重新登录',
				icon: 'error',
				duration: 2000
			})
			//清空当前保存的token
			uni.setStorageSync('token', '');
			// 强制跳转至登录页
			uni.reLaunch({
				url: '/pages/login/login',
				fail(e) {
					console.error(e);
				}
			});
		}
		return res;
	},
	(err, config) => {
		console.error("is global response fail interceptor");
		console.error("err: ", err);
		console.error("config: ", config);

		return Promise.reject(err);
	}
);