uni-app中添加路由拦截

uni-app中添加路由鉴权和路由拦截


在main.js中添加如下代码

let list = ["navigateTo", "redirectTo", "reLaunch", "switchTab"]
let routesWhitelist = ['/pages/tabs/classify','/pages/tabs/study','/pages/tabs/mine'] // 可以直接跳转的路由
let routesMap = [] // 必须登录之后才能跳转的路由
// 路由拦截
list.forEach((item)=> {
	uni.addInterceptor(item,{ // 添加拦截器
		invoke(args) {
			let userToken = store.state.user.token
			console.log('跳转的参数', args)
			if (routesWhitelist.includes(args.url) || !userToken && args.url === '/pages/login/index') {
				return true
			}
			if (!userToken && routesMap.includes(args.url)) {
					// uni.showToast({
					// 	title: '您还未登录哦',
					// 	icon: 'error'
					// })
					uni.reLaunch({
						url: '/pages/login/index'
					})
					return false
			}
			return true
		}
	})
})
### uni-app 中实现登录拦截的方法 在开发基于 `uni-app` 的应用时,确保用户已成功登录对于保护受权限控制的内容至关重要。通过结合 `axios` 请求库以及路由管理工具如 `uni-simple-router` 可以有效地创建一个健壮的登录拦截机制。 #### 使用 Axios 拦截器处理 Token 和未认证状态 为了实现在每次 HTTP 请求前自动附加访问令牌 (Token),可以利用 `axios` 提供的请求/响应拦截功能来完成这一目标: ```javascript import axios from 'axios'; // 假设 store.js 是 Vuex 存储模块的位置 import { useStore } from '@/store'; const instance = axios.create({ baseURL: process.env.VUE_APP_API_URL, }); instance.interceptors.request.use( config => { const store = useStore(); // 如果存在 token,则将其加入到 Authorization header 中 if (store.getters['auth/token']) { config.headers.Authorization = `Bearer ${store.getters['auth/token']}`; } return config; }, error => Promise.reject(error), ); instance.interceptors.response.use(undefined, async function (error) { if (error.response.status === 401 || error.response.statusText === "Unauthorized") { try { await logoutUser(); // 清除本地存储中的token和其他敏感数据 window.location.href = '/login'; // 或者使用框架特定的方式重定向至登录页面 } catch (_) {} } return Promise.reject(error); }); ``` 上述代码片段展示了如何配置自定义的 `axios` 实例,在发送任何 API 请求之前检查是否存在有效的会话令牌,并相应地设置 `Authorization` 头部字段[^1]。当服务器返回的状态码为 `401 Unauthorized` 表明当前用户的凭证无效或不存在时,程序将会清除所有与身份验证有关的信息并将用户重定向回登录界面。 #### 结合 Uni-Simple Router 进行导航守卫 除了在网络层面上做防护外,还可以借助于 `uni-simple-router` 来增强安全性。具体来说就是添加全局前置钩子函数用于判断即将进入的目标路径是否需要先经过身份验证才能继续前进: ```javascript import VueRouter from '@dcloudio/vue-cli-plugin-uniapp/router' import router from './router' // 导入项目内的路由配置文件 import { useStore } from '@/store' Vue.use(VueRouter) const originalPush = VueRouter.prototype.push; VueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err); }; router.beforeEach((to, _, next) => { const requiresAuth = to.matched.some(record => record.meta.requiresAuth); const store = useStore(); if (!requiresAuth) return next(); if (!store.getters['auth/isAuthenticated']) { next({ path: "/login", query: { redirect: to.fullPath }} ); } else { next(); } }) ``` 此部分逻辑会在每一次试图切换视图的时候被执行一次。如果发现下一个目的地含有 `meta.requiresAuth=true` 属性标记说明该页仅限已注册成员查看;此时再进一步确认是否有合法的身份证明材料可用——如果没有的话就强制跳转去登陆界面对应位置等待输入账号密码信息[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值