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

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')

  • 3
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
实现路由守卫可以通过 Vue Router 提供的 beforeEach 和 afterEach 钩子函数来实现。在 Vue3 + TypeScript 项目中,可以按照以下步骤实现路由守卫: 1. 在 main.ts 文件中创建 Vue Router 实例,可以定义全局前置守卫和后置守卫: ```typescript import { createRouter, createWebHistory } from 'vue-router'; import { RouteRecordRaw } from 'vue-router'; const routes: Array<RouteRecordRaw> = [ // 路由配置 ]; const router = createRouter({ history: createWebHistory(), routes }); router.beforeEach((to, from, next) => { // 全局前置守卫 }); router.afterEach((to, from) => { // 全局后置守卫 }); export default router; ``` 2. 在路由配置中添加 meta 属性,用于存储需要验证的信息: ```typescript const routes: Array<RouteRecordRaw> = [ { path: '/', name: 'Home', component: Home, meta: { requiresAuth: true } }, // 其他路由配置 ]; ``` 3. 在全局前置守卫中判断路由是否需要验证,如果需要,则进行相关操作: ```typescript router.beforeEach((to, from, next) => { if (to.meta.requiresAuth) { // 判断用户是否登录 const isLoggedIn = true; // 假设用户已经登录,实际情况需要根据具体业务来判断 if (isLoggedIn) { next(); } else { next('/login'); // 未登录则跳转到登录页面 } } else { next(); } }); ``` 4. 在组件中使用路由守卫: ```typescript import { defineComponent } from 'vue'; import { RouteLocationNormalized } from 'vue-router'; export default defineComponent({ name: 'Home', beforeRouteEnter(to: RouteLocationNormalized, from: RouteLocationNormalized, next: any) { // 进入路由前的守卫 next(); }, beforeRouteLeave(to: RouteLocationNormalized, from: RouteLocationNormalized, next: any) { // 离开路由前的守卫 next(); } }); ``` 以上就是在 Vue3 + TypeScript 项目中实现路由守卫的步骤。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值