vue3 + uniapp 开发，请求,响应，路由守卫等信息，开发前必看

剑无锋*十年磨一剑

已于 2023-03-09 08:33:10 修改

阅读量2.7k

点赞数 4

分类专栏： vue3 文章标签： uni-app 前端

于 2023-02-23 09:10:52 首次发布

本文链接：https://blog.csdn.net/qq_40095911/article/details/129174370

版权

vue3 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

该文介绍了在uniapp中如何对uni.request进行封装，以处理不同的权限需求和错误处理。同时，展示了使用Gowiny-uni-router进行Vue3路由守卫的配置，实现用户无token时重定向到登录页以及登录后的页面跳转逻辑。此外，还演示了如何定义和调用API接口。

摘要由CSDN通过智能技术生成

uni.request 先进行封装

import baseUrl from './config.js'

const request = {}
const headers = {}

request.globalRequest = (url, method, data, power) => {
	// 权限判断 因为有的接口请求头可能需要添加的参数不一样，所以这里做了区分
	    // 1 == 不通过access_token校验的接口
	    // 2 == 文件下载接口列表
	
	const token = uni.getStorageSync('token')
	switch (power) {
		case 1:
			// headers['Authorization'] = 'Basic a3N1ZGk6a3N1ZGk='
			break;
		default:
			headers['Authorization'] = 'Bearer ' + token
			break;
	}

	return uni.request({
		timeout:60000,
		url: baseUrl + url,
		method,
		data: data,
		dataType: 'json',
		header: headers
	}).then(res => {
		return res.data
	}).catch(parmas => {
		switch (parmas.code) {
			case 401:
				uni.clearStorageSync()
				break
			default:
				uni.showToast({
					title: parmas.message,
					icon: 'none'
				})
				return Promise.reject()
				break
		}
	})
}
export default request

config.js

let baseUrl = ""
if (process.env.NODE_ENV === 'development') {
	baseUrl = ''  // 开发环境
} else {
	baseUrl = '' // 生产环境
}
export default baseUrl

路由用的

gowiny-uni-router

用的还行，挺方便的

roter/index.js

import { createRouter } from '@gowiny/uni-router'
import PAGE_DATA from '@/pages.json';

const router = createRouter({
    pageData:PAGE_DATA
})

router.beforeEach((to,from)=>{

	if(to.path !== '/pages/login/index' && !uni.getStorageSync('token')){
	return {
			to:{//需要跳转的新页面
				path:'/pages/login/index',
			},
			navType:'push'//跳转方式
		}
    }
	if(to.path == '/pages/login/index' && uni.getStorageSync('token')){
		return {
				to:{//需要跳转的新页面
					path:'/pages/index/index',
				},
				navType:'pushTab'//跳转方式
			}
	}
})

export default router

gowiny-uni-router: uniapp 的 vue3版本的路由守卫

这里是router 的链接地址

api.js

import request from '@/util/request.js'

const api = {}
// 登录
api.login = (data) => request.globalRequest(``, 'POST', data, 1)
// GET请求方式
api.close = (params) => request.globalRequest(``,'GET', {}, 1)

api.list = () => request.globalRequest('','post')