uniapp实现路由拦截——实战案例（二）

uniapp如何实现登录路由拦截？

今天再次介绍一下 uni-simple-router 插件，记得最初使用时，是在三年以前了，这里简单介绍通过自动读取 pages.json 作为路由表的方式，欢迎指教~

上一篇介绍.基本路由配置

快速上手，实现登录的路由拦截

效果图

路由守卫效果图

router.beforeEach ，to，from 数据结构

• App

• 微信小程序
  

• H5

修改相关文件

• 在上一篇.基本配置.基础上修改请查看

pages.json

• name 路由名称，例：通过 命名路由 方式跳转时使用；
• needLogin 表示 需要登录

{
	"pages": [
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "simple-router"
			},
			"aliasPath": "/",
			"name": "index",
			"meta": {
				"needLogin": false
			}
		},
		{
			"path": "pages/deviceList/deviceList",
			"style": {
				"navigationBarTitleText": "设备列表"
			},
			"name": "deviceList",
			"meta": {
				"needLogin": true
			}
		},
		{
			"path": "pages/login/login",
			"style": {
				"navigationBarTitleText": "登录"
			},
			"name": "login",
			"meta": {
				"needLogin": false
			}
		},
		{
			"path": "pages/404/index",
			"style": {
				"navigationBarTitleText": "404"
			},
			"name": "404",
			"meta": {
				"needLogin": false
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "simple-router",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	}
}

router.js

• 在全局路由守卫中beforeEach，处理登录逻辑
• to: 将要跳转的目标路由
• from: 从哪里来，来源路由
• next：next是个拦截函数
  • next() 无参数时，表示正常放行
  • next(false) 表示阻止通行，此时不能跳转
  • next(‘/’) 里面参数也可以是新路径，此时就会跳转到新路径
• 注意： 你可以会遇到无法获取 meta 的问题，需要在 vue.config.js 的 includes 中 添加 meta；

import {
	RouterMount,
	createRouter
} from 'uni-simple-router'

const router = createRouter({
	platform: process.env.VUE_APP_PLATFORM,
	routes: [
        ...ROUTES,
        {
			path: '*',
			redirect: (to) => {
				return {
					name: '404'
				}
			}
		}
	]
})

// 全局路由前置守卫
router.beforeEach((to, from, next) => {
	// 判断是否已登录过，已登录直接 next
	const token = getToken(); // 获取 TOKEN，修改为自己方法
	if (token) {
		next();
		return;
	}
	
    // 判断是否需要登录
	if (to.meta.needLogin) {
		next({
			name: 'login',
			params: { // 路由参数
				jumpPath: to.fullPath // 完整路径
			}
		})
	} else {
		next();
	}
})

// 全局路由后置守卫
router.afterEach((to, from) => {
	console.log('跳转结束');
})

export {
	router,
	RouterMount
}

index.vue

<button type="primary" @click="routerTap">路由拦截</button>

routerTap() {
	uni.navigateTo({
		url: 'pages/deviceList/deviceList'
	})
}

login.vue

• 在登录页面，接收参数；

onLoad(options) {
	console.log('options：', options);
	if (options.jumpPath) this.jumpPath = decodeURIComponent(options.jumpPath);
}

• 处理 登录成功后，跳转 目标页面；
• 判断 路径是否来源 tabBar 执行不同跳转方式；

if (this.jumpPath) {
	let tmpBack = this.jumpPath;
	let tmpSplitVal = tmpBack.split('?')[0]; // 通过遍历 tabbarList 方式也是可以的
	let tabbarList = ['/pages/index/index', '/pages/setting/setting', '/pages/user/user'];
	if (tabbarList.indexOf(tmpSplitVal) != -1) {
		uni.switchTab({
			url: tmpBack
		})
	} else {
		uni.redirectTo({
			url: tmpBack
		})
	}
} else { // 没有参数，默认跳转所需页面 例：
	uni.redirectTo({
		url: '/pages/deviceList/deviceList'
	})
}

路由传参

路由跳转方式

• push
• pushTab：跳转 tabBar
• replace：替换
• replaceAll：替换所有
• back：返回第几层（数字）

uni 传参方式

uni.navigateTo({
	url: 'pages/login/login?name=smile'
})

query 传参方式

this.$Router.push({
	path: '/pages/login/login',
	query: {
		name: 'smile'
	}
})

params 传参方式

this.$Router.push({
	name: 'login',
	params: {
		name: '小不点~'
	}
})

注意

• path 和 query 配对使用
• name 和 params 配对使用