封装跳转登陆页面

樊小烦

于 2021-01-29 18:19:59 发布

阅读量161

点赞数

文章标签： javascript uni-app vue

本文链接：https://blog.youkuaiyun.com/qq_42644893/article/details/113399760

版权

本文介绍了如何在前端路由中使用URL白名单来避免未授权访问，并通过getLoginPath函数实现路由跳转到登录页面时附加参数。导航拦截器navigatioon检查路径，确保用户登录前被引导至登录界面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步:url.js

export default {
	//不需要登陆的页面
	excludePath:[...]
}

第二步:router.js

/**
 * @description 解析路由，并拼接到登录链接中 e.g:/pages/login/login?redirect=要去的路径&要去路径参数
 * @param url 当前需跳转的路由
 * @returns {string} 带参数的登录路由地址
 */
 function getLoginPath(url) {
	let loginPath = '/pages/login/login';
	let splitUrl = url.split('?');
	loginPath += `?redirect=${splitUrl[0]}`;
	if (splitUrl.length > 1) {
		loginPath += `&${splitUrl[1]}`;
	}
	return loginPath;
 }
/**
 * @description 筛选路由，是否跳转登陆页面
 * @param route 当前需跳转的路由
 */
import { excludePath } from 'router.js'
function navigation(route) {
	let url = route.url;
	let splitUrl = url.split('?');
	判断登陆的状态...
	if (excludePath.indexOf(url) === -1 && (!登陆的状态) ) {
		uni.navigationTo({
			url: getLoginPath(url);
		})
	}
}