目录
一、理解 uni-crazy-router 在 uni-app 中的路由管理
tips:此部分代码位于src-router里。
首先，index.js
import uniCrazyRouter, {beforeEach, afterEach, onError, afterNotNext} from "uni-crazy-router";
import {bindInterceptLogin, destroyInterceptLogin} from './interceptLogin'
import {sleep} from '@/common/utils/sleep.js'
// 开放给main.js
export function setupRouter (app) {
// 接收vue3的实例
app.use(uniCrazyRouter)
// 启用登录页的拦截
bindInterceptLogin()
beforeEach(async (to, from, next)=>{
console.log(to.url, '<=' ,from.url)
// 逻辑代码
/*
if (to.url === 'pages/p1/index') {
uni.showToast({
title:'pages/p1/index'
})
await sleep(3000)
afterNotNext(() => {
uni.navigateTo({
url: '/pages/index/page1',
passedParams: {
info: '因为page2不存在，拦截跳转到此'
}
})
})
return
}
*/
next()
})
afterEach((to, from)=>{
// 逻辑代码
})
// 除了在beforeEach钩子里没有使用next导致的无法跳转的情况外，其他情况导致的跳转失败都会触发onError
onError(async(to, from)=>{
console.log(to.url, '跳转错误')
uni.showToast({
title: `${to.url} 跳转错误，不存在？`,
icon: 'none'
})
await sleep(3000)
})
}一、理解 uni-crazy-router 在 uni-app 中的路由管理
在 uni-app 开发中，路由管理是一个至关重要的部分，它决定了用户如何在应用的不同页面之间导航。虽然 uni-app 提供了基本的页面路由配置通过 pages.json 文件，但在某些复杂场景下，我们可能需要更灵活的路由控制，比如路由守卫、错误处理等。这时，第三方库如 uni-crazy-router 就显得尤为有用。
二、引入 uni-crazy-router
首先，我们从 uni-crazy-router 库中引入了必要的函数和钩子，包括 beforeEach、afterEach、onError 以及一个假设存在的 afterNotNext（注意：afterNotNext 可能不是 uni-crazy-router 标准API的一部分，这里可能是为了示例而假设的）。同时，我们还引入了自定义的登录拦截函数 bindInterceptLogin 和一个工具函数 sleep。
import uniCrazyRouter, {beforeEach, afterEach, onError, afterNotNext} from "uni-crazy-router";
import {bindInterceptLogin, destroyInterceptLogin} from './interceptLogin'
import {sleep} from '@/common/utils/sleep.js'三、设置路由
接下来，我们定义了一个 setupRouter 函数，这个函数接收 uni-app 的实例 app 作为参数，并用于初始化路由配置。
export function setupRouter (app) {
// 接收vue3的实例
app.use(uniCrazyRouter)
// 启用登录页的拦截
bindInterceptLogin()
// ... 其他路由配置
} 在 setupRouter 函数内部，我们首先通过 app.use(uniCrazyRouter) 将 uniCrazyRouter 插件应用到 uni-app 实例上，从而启用路由功能。
四、路由守卫
-
全局前置守卫
beforeEach：
这个守卫在路由即将跳转前被调用，可以用于执行权限检查、页面重定向等逻辑。在示例中，我们打印了即将跳转到的页面和来源页面的 URL，并预留了逻辑代码的位置（通过注释表示）。如果取消注释并启用相关代码，当尝试跳转到'pages/p1/index'时，会先显示一个 Toast 消息，等待3秒后重定向到另一个页面。 -
全局后置守卫
afterEach：
这个守卫在路由跳转完成后被调用，可以用于执行一些清理工作或页面跳转后的逻辑。在示例中，我们预留了逻辑代码的位置，但并未实现具体功能。 -
错误处理
onError：
当路由跳转失败时（比如目标页面不存在），会触发onError钩子。在示例中，我们打印了跳转错误的页面 URL，并显示了一个 Toast 消息提示用户跳转错误。
五、自定义登录拦截
通过调用 bindInterceptLogin 函数，我们启用了自定义的登录拦截逻辑。这个函数内部可能使用了 beforeEach 钩子来检查用户是否已登录，并根据需要重定向到登录页面。
总之，uni-crazy-router 为 uni-app 提供了强大的路由管理功能，包括路由守卫、错误处理等。上面的示例展示了如何设置路由、使用路由守卫以及处理路由错误，同时也展示了如何结合自定义的登录拦截逻辑来增强应用的安全性。
接着，interceptEveryone.js
import {beforeEach, afterNotNext} from "uni-crazy-router"
let intercept
export function bindInterceptEveryone () {
destroyInterceptEveryone()
intercept = beforeEach(async (to, from ,next) => {
if (to.url === 'pages/login') {
afterNotNext(() => {
// 拦截路由，并且跳转去登录页
uni.navigateTo({
url: '/pages/index/page1',
passedParams: {
info: '不需要登录，对任何人开放'
}
})
})
return // 拦截路由，不执行next
}
next()
})
}
export function destroyInterceptEveryone () {
if (intercept) {
intercept() // 销毁拦截
intercept = null
}
} 在开发微信小程序个人财务管理系统时，路由管理是一个关键部分，它决定了用户如何在应用的不同页面之间导航。虽然微信小程序本身并不直接支持像 Vue Router 那样的路由系统，但通过使用 uni-app 框架及其扩展库如 uni-crazy-router，我们可以实现类似的功能。下面介绍如何在微信小程序个人财务管理系统中使用 uni-crazy-router 进行路由拦截，以确保用户访问受保护的页面时需要进行身份验证。
一、引入 uni-crazy-router
首先，确保项目中已经集成了 uni-crazy-router。这个库为 uni-app 提供了类似于 Vue Router 的路由管理功能，包括路由守卫等。
二、路由拦截的实现
在个人财务管理系统中，我们可能需要拦截对特定页面的访问，比如用户未登录时尝试访问账户详情页面。这时，我们可以使用 uni-crazy-router 提供的 beforeEach 钩子来实现路由拦截。
以下代码展示了如何设置和销毁一个全局的路由拦截器，该拦截器会检查用户是否尝试访问登录页面，并相应地重定向用户：
import {beforeEach, afterNotNext} from "uni-crazy-router";
let intercept;
// 绑定全局路由拦截器
export function bindInterceptEveryone() {
destroyInterceptEveryone(); // 先销毁之前的拦截器（如果有的话）
intercept = beforeEach(async (to, from, next) => {
if (to.url === 'pages/login') {
// 如果目标页面是登录页面，但用户可能不应该直接访问它（比如已经登录）
// 这里我们假设总是重定向到另一个页面，实际项目中应根据实际情况调整
afterNotNext(() => {
uni.navigateTo({
url: '/pages/index/page1',
// 注意：微信小程序中通常不使用 passedParams，这里仅为示例
// 你可以通过全局状态管理（如 Vuex）或页面参数传递信息
success: () => {
console.log('重定向到首页成功');
}
});
});
return; // 拦截路由，不执行 next()
}
next(); // 允许路由继续
});
}
// 销毁全局路由拦截器
export function destroyInterceptEveryone() {
if (intercept) {
intercept(); // 调用拦截器函数以销毁它
intercept = null; // 清除引用
}
}三、在个人财务管理系统中的应用
在个人财务管理系统中，可以将 bindInterceptEveryone 函数在应用的启动阶段调用，以设置全局的路由拦截逻辑。例如，在 main.js 或 App.vue 的 onLaunch 或 mounted 钩子中调用它。
当用户尝试访问需要登录的页面时，可以通过修改 beforeEach 钩子中的逻辑来检查用户的登录状态，并相应地重定向到登录页面或允许访问。
然后，interceptLogin.js
import { beforeEach, afterNotNext } from "uni-crazy-router"
import { store, mutations } from '@/uni_modules/uni-id-pages/common/store.js'
import pagesJson from '@/pages.json'
let intercept;
export function bindInterceptLogin() {
destroyInterceptLogin()
intercept = beforeEach(async (to, from, next) => {
/*
afterNotNext(() => {
// 拦截路由，并且跳转去登录页
uni.navigateTo({
url: '/pages/login/login'
})
})
return // 拦截路由，不执行next
*/
// console.log('登录状态：', to, store.hasLogin);
// console.log(pagesJson.pages)
var result = pagesJson.pages.find(item => item.path === to.url);
if(result && result.needLogin && to.url != '/' && !store.hasLogin){
// console.log('登录状态：', result.needLogin, store.hasLogin);
uni.showToast({
title: '暂未登录，请先登录！',
icon: 'none'
})
return
}
next()
// if (to.url === 'pages/profile/login') {
// if (uni.getStorageSync('loginStatus')) {
// afterNotNext(() => {
// // 拦截路由，并且跳转去登录页
// uni.navigateTo({
// url: '/pages/index/page1',
// passedParams: {
// info: '已登录'
// }
// })
// })
// } else {
// uni.showToast({
// title: '没有登录，不能访问！',
// icon: 'none'
// })
// }
// return // 拦截路由，不执行next
// }
// next()
})
}
export function destroyInterceptLogin() {
if (intercept) {
intercept() // 销毁拦截
intercept = null
}
}
在开发微信小程序时，尤其是像个人财务管理系统这样的应用，处理用户的登录状态是非常重要的。通过使用 uni-app 框架及其扩展库 uni-crazy-router，便可以轻松地实现路由拦截，确保用户只能访问他们有权访问的页面。下面将解释一个使用 uni-crazy-router 进行登录状态路由拦截的示例代码。
一、引入依赖
首先，我们引入了必要的依赖：
- 从
uni-crazy-router 引入 beforeEach和afterNotNext。beforeEach是一个全局守卫，允许我们在路由跳转前执行某些操作。 store和mutations从@/uni_modules/uni-id-pages/common/store.js。这里假设store是一个全局状态管理对象，用于存储用户的登录状态等信息。pagesJson从@/pages.json。这个文件通常定义了小程序的所有页面路径和窗口表现等信息，在这里我们用它来检查哪些页面需要登录才能访问。
二、路由拦截逻辑
接下来，我们定义了 bindInterceptLogin 和 destroyInterceptLogin 两个函数来分别绑定和销毁登录状态的路由拦截器。
bindInterceptLogin
这个函数首先调用 destroyInterceptLogin 以确保不会重复绑定拦截器。然后，它使用 beforeEach 钩子来设置路由拦截逻辑。在拦截器中，我们做了以下几件事：
-
检查页面是否需要登录：通过遍历
pagesJson.pages数组，查找与当前路由（to.url）匹配的页面配置。如果页面配置中存在needLogin属性且为true，同时用户未登录（!store.hasLogin），则执行下一步操作。 -
显示提示并阻止路由跳转：如果用户未登录但尝试访问需要登录的页面，使用
uni.showToast显示一个提示信息，告知用户需要先登录。然后，通过不调用next()函数来阻止路由的进一步跳转。 -
允许路由继续：如果用户已登录或尝试访问的页面不需要登录，则调用
next()函数允许路由继续执行。
destroyInterceptLogin
这个函数用于销毁之前绑定的路由拦截器。如果 intercept 变量存在（即已经绑定了拦截器），则调用它并将其设置为 null，以释放资源并避免内存泄漏。
小结
通过使用 uni-crazy-router，我们可以在微信小程序中实现灵活的路由管理，包括基于登录状态的路由拦截。这有助于提高应用的安全性，确保用户只能访问他们有权访问的页面。同时也使得应用的导航逻辑更加清晰和易于维护。
另附：小程序登录流程官网图
扫一扫
1396
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
