uniapp配置 免登录页面

uniapp开发笔记之登录权限设置

提示:在接触了uniapp,第一次开始写一个项目遇到的问题 记录下来供小伙伴们参考,如果有问题或者更好的方法可以和我交流 -- 共同进步
第一章 uniapp 登录权限 跳转登录页面配置


文章目录

  • uniapp开发笔记之登录权限设置
  • 前言
  • 一、建立公共方法的文件 - 方便统一管理
          • `小伙伴可以根据自己定义文件名称 `
  • 二、在根目录的App.vue 文件中 头部 引入 刚刚创建的 vue 文件
    • logincheck.vue 代码内容
  • 总结


前言

遇到问题:应用有登录逻辑 - 如果有人分享页面 则会先跳转登录页面 这样逻辑是正确的 。可是 有些页面不需要用户登录 那这种情况跳转登录页面那就不对了多了一步跳转登录 所以 我在下面记录了 我的处理方法。


一、建立公共方法的文件 - 方便统一管理

提示:这里我在跟目录建立了common文件夹 然后在文件夹下面建立了logincheck.vue

小伙伴可以根据自己定义文件名称

uniapp配置 免登录页面_第1张图片

二、在根目录的App.vue 文件中 头部 引入 刚刚创建的 vue 文件

import { login_check } from '@/common/logincheck.vue'

在onShow 方法里面 调用刚刚创建的方法名称

login_check()

如下图:
uniapp配置 免登录页面_第2张图片

logincheck.vue 代码内容

代码如下(示例): whiteList 数组里面就是白名单 设置后访问该路径 就不会跳转登录页面

<script>
export function login_check() {
	console.log(location.pathname);
	let pathName = location.pathname;
	// 页面白名单
	const whiteList = ['/', '/pages/login/login','/pages/about/about'];
	let token = uni.getStorageSync('token');
	// 在白名单中或有token,直接跳转
	if (whiteList.indexOf(pathName) !== -1 || token) {
		return;
	} else {
		uni.redirectTo({
			url: `/pages/login/login?path=${pathName}`
		});
	}
}

</script>

总结

以上就是要分享的内容,本文仅仅简单介绍了登录路径白名单的应用,我也在不停地学习和进步 如果有更好的方法麻烦踢我一下

你可能感兴趣的:(uniapp,uni-app,javascript,前端)