实现代码
  1. 存储token:uni.setStorageSync('token', res.data.result);
  2. 获取token:uni.getStorageSync('token');
  3. 清除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);
	}
);
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐