当前位置: 首页 > article >正文

vue2的uniapp添加用户登录校验

在 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 中获取登录状态。


http://www.kler.cn/a/391927.html

相关文章:

  • Spring框架之观察者模式 (Observer Pattern)
  • Unity3D学习FPS游戏(12)敌人检测和攻击玩家
  • Chrome使用IE内核
  • 拦截器实现http请求访问本地图片
  • 词嵌入方法(Word Embedding)
  • 【学习】【HTML】HTML、XML、XHTML
  • 政企学习考试系统(源码+文档+部署+讲解)
  • HarmonyOS应用之低代码开发平台
  • Docker Compose 从入门到实战:构建现代化应用栈
  • 智能病历xml提取
  • [实用小代码java]-如何将对象存储服务器上的文件下载到客户端
  • 书生浦语XTuner 微调个人小助手
  • 深入了解Git、GitHub、GitLab及其应用技巧
  • SpringBoot中的线程安全及其处理方法
  • SQL的基本CRUD操作
  • 方法论-批判性思维提问法
  • Nginx 部署负载均衡服务全解析
  • HCIP(11)-期中综合实验(BGP、Peer、OSPF、VLAN、IP、Route-Policy)
  • 博弈连锁美业门店管理系统中如何购买课程服务?美业疗愈系统收银系统源码
  • 四期书生大模型实战营(【基础岛】- 第1关 | 书生·浦语大模型开源开放体系)
  • spring cloud 入门笔记1(RestTemplate,Consul)
  • 全面介绍软件安全测试分类,安全测试方法、安全防护技术、安全测试流程
  • 安装阿里巴巴的Dragonwell(替代JDK)
  • [CKS] CIS基准测试,修复kubelet和etcd不安全项
  • hhdb数据库介绍(9-3)
  • 【论文笔记】SparseRadNet: Sparse Perception Neural Network on Subsampled Radar Data