【前端开发】Uniapp:路由拦截器配置

路由拦截器

  • 创建拦截器配置文件:permission.js
javascript 复制代码
// 获取登录token值
import { getToken } from '@/utils/auth'

// 登录页面
const loginPage = "/pages/login"
  
// 页面白名单
const whiteList = [
  '/pages/login',
  '/pages/register',
  '/pages/common/webview/index'
]

// 检查地址白名单
function checkWhite(url) {
  const path = url.split('?')[0]
  return whiteList.indexOf(path) !== -1
}

// 页面跳转验证拦截器
let list = ["navigateTo", "redirectTo", "reLaunch", "switchTab"]
list.forEach(item => {
  uni.addInterceptor(item, {
    invoke(to) {
      if (getToken()) {
        if (to.url === loginPage) {
          uni.reLaunch({ url: "/" })
        }
        return true
      } else {
        if (checkWhite(to.url)) {
          return true
        }
        uni.reLaunch({ url: loginPage })
        return false
      }
    },
    fail(err) {
      console.log(err)
    }
  })
})
  • 全局配置
javascript 复制代码
import '@/permission.js'
相关推荐
jingling5553 分钟前
无需重新安装APK | uni-app 热更新技术实战
前端·javascript·前端框架·uni-app·node.js
遇见小美好y4 分钟前
uniapp 实现向下追加数据功能
前端·javascript·uni-app
wuhen_n5 分钟前
数据缓存策略:让我们的应用“快如闪电”
前端·javascript·vue.js
wuhen_n6 分钟前
自定义指令:为 DOM 操作提供高效的抽象入口
前端·javascript·vue.js
C_心欲无痕8 分钟前
前端 PDF 渲染与下载实现
前端·pdf
jiayong239 分钟前
可视化流程设计器技术对比:钉钉风格 vs BPMN
java·前端·钉钉
前端不太难11 分钟前
Flutter Web / Desktop 为什么“能跑但不好用”?
前端·flutter·状态模式
甘露s13 分钟前
新手入门:传统 Web 开发与前后端分离开发的区别
开发语言·前端·后端·web
双河子思14 分钟前
自动化控制逻辑建模方法
前端·数据库·自动化
wsad053217 分钟前
Vue.js 整合传统 HTML 项目:注册页面实战教程
前端·vue.js·html