首页 > 其他分享 >vue2的uniapp添加用户登录校验

vue2的uniapp添加用户登录校验

时间:2024-11-14 10:47:56浏览次数:3  
标签:navigateTo uniapp 登录 检查 校验 vue2 跳转 uni 页面

在 uni-app 中实现全局路由守卫的确切方法可能会根据框架的版本和具体的实现方式有所不同。在 Vue 2 和 uni-app 的结合使用中,全局路由守卫并不是原生支持的功能,因此我们需要采用一些替代方案。

对于 Vue 2 和 uni-app,你可以通过封装 uni-app 的页面跳转方法来实现类似全局守卫的功能。以下是一个可能的实现方式:

  1. 创建一个统一的跳转函数,在这个函数中实现登录状态的检查。
  2. 在需要用户登录后才能访问的页面,使用这个统一的跳转函数来进行页面跳转。
// utils.js
export function navigateTo(url) {
  // 检查登录状态
  const isLogin = checkLogin();
  if (!isLogin) {
    // 未登录,重定向到登录页面
    uni.showToast({
      title: '请先登录',
      icon: 'none'
    });
    setTimeout(() => {
      uni.redirectTo({
        url: '/pages/login/login' // 登录页面路径
      });
    }, 1500);
  } else {
    // 已登录,正常跳转
    uni.navigateTo({
      url: url
    });
  }
}

function checkLogin() {
  // 这里应该添加检查登录状态的逻辑
  // 返回 true 表示已登录,返回 false 表示未登录
  // 例如,检查本地存储中是否有 token
  return !!uni.getStorageSync('userToken');
}

然后,在你的页面中,使用这个 navigateTo 函数来代替直接使用 uni.navigateTo

// 在页面中
import { navigateTo } from '@/utils.js';

export default {
  methods: {
    goToSomePage() {
      navigateTo('/pages/somePage/somePage');
    }
  }
}

这样,每次页面跳转都会先检查登录状态,如果未登录,则跳转到登录页面。

请注意,这个方法需要你确保项目中所有的页面跳转都使用这个封装好的 navigateTo 函数。如果项目中有些地方直接使用了 uni.navigateTo,那么这些地方的跳转将不会经过登录检查。

此外,确保你的登录状态检查逻辑是正确的,例如检查本地存储中的 token 是否存在等。如果你的应用使用了 Vuex 来管理状态,你也可以从 Vuex 中获取登录状态。

标签:navigateTo,uniapp,登录,检查,校验,vue2,跳转,uni,页面
From: https://blog.csdn.net/qq_37703224/article/details/143675486

相关文章

  • Vue2.0的v-model指令
    Vue2.0的v-model指令    v-model="属性"写在标签中上,相当于在一个标签上,同时写了  :value='属性值'  @iinput='handler' ,而handler对应的函数如果没有声明,就是给该属性值赋值的setter函数代码一: <!DOCTYPEhtml><htmllang="en"><head><meta......
  • Vue2.0计算属性
     Vue2.0计算属性:     计算属性:通过计算得到一个属性,避免v-if和v-for出现在同一个标签上  <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initia......
  • uniapp微信小程序video不显示,不生效
    问题描述微信小程序开发者工具video不显示,无法播放,也没有任何错误,就是不显示原因报错原因:微信开发者工具调试基础库版本太高解决方法 ......
  • 【vue2】14.插槽
    目录插槽-默认插槽插槽基本语法:插槽-后备内容(默认值)插槽-具名插槽插槽-作用域插槽插槽-默认插槽作用:让组件内部的一些结构支持自定义需求:将需要多次显示的对话框,封装成一个组件问题:组件的内容部分,不希望写死,希望能使用的时候自定义。怎么办?插槽......
  • 微信小程序PHP+uniapp社区后勤报修系统
    目录项目介绍具体实现截图微信开发者工具HBuilderX+uniapp开发技术简介文件解析设计思路性能/安全/负载方面数据访问方式PHP核心代码部分展示代码目录结构解析详细视频演示源码获取项目介绍小程序端运行软件微信开发者工具/hbuiderx基于微信小程序的社区后勤报修系......
  • 微信小程序 nodejs+uniapp+vue个人身体健康系统184bw
    目录课题介绍具体实现截图使用技术介绍解决的思路开发工具和技术简介错误处理和异常处理nodejs类核心代码部分展示源码获取/联系我课题介绍实现了一个完整的身体健康系统,其中主要有运动推荐模块、用户事务模块、用户分享模块、用户模块、饮食推荐模块、消息提醒模块......
  • 2024-11-13 uniapp自定义全局弹窗并可以通过uni来调用【转载】
    新建三个文件: dialog.js:exportdefault{/*链接处理*/getLink(params){leturl="/components/dialog/index";if(params){letparamStr="";for(letnameinparams){param......
  • 基于SpringBoot+Vue+uniapp的大学生志愿者信息管理系统的详细设计和实现(源码+lw+部署
    文章目录前言详细视频演示具体实现截图技术栈后端框架SpringBoot前端框架Vue持久层框架MyBaitsPlus系统测试系统测试目的系统功能测试系统测试结论为什么选择我代码参考数据库参考源码获取前言......
  • uniapp中uni.setTabBarItem方法在非tabbar页面使用会报错
    背景:uniapp在开发小程序多语言切换功能时,使用uni.setTabBarItem方法切换tabbar语言时报错,查阅文档发现微信小程序该功能只能在tabbar页面或其子页面中使用,不能在其他页面直接使用。解决:在tabbar页面中使用onShow方法监听切换语言设置,部分代码示例如下:<scriptsetup>import{......
  • vue2相关
    v-html: 原始HTML双大括号会将数据解释为普通文本,而非HTML代码。为了输出真正的HTML,你需要使用 v-html 指令:<p>Usingmustaches:{{rawHtml}}</p><p>Usingv-htmldirective:<spanv-html="rawHtml"></span></p>v-bind:AttributeMustache语法不能作用在......