【前端开发】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'
相关推荐
Codebee8 分钟前
OneCode 移动套件多平台适配详细报告
前端·人工智能
你知唔知咩系timing啊11 分钟前
🎙️ 站在巨人肩膀上:基于 SenseVoice.cpp 的前端语音识别实践
前端
一位搞嵌入式的 genius11 分钟前
前端开发核心技术与工具全解析:从构建工具到实时通信
前端·笔记
littleplayer13 分钟前
Redux 中›ABC三个页面是如何通信的?
前端
安卓开发者13 分钟前
鸿蒙NEXT的Web组件网络安全与隐私保护实践
前端·web安全·harmonyos
程序员NEO22 分钟前
3分钟搞定Vue组件库
前端
程序员NEO26 分钟前
WebStorm代码一键美化
前端
前端农民工ws1 小时前
Vue 框架的 markdown 渲染组件,针对 AI 的 markdown 流式传输场景
前端·javascript·vue.js·ai
昔人'1 小时前
css 高度从 0 到 auto 的动画效果 `interpolate-size: allow-keywords`
前端·css
百思可瑞教育1 小时前
Vue 生命周期详解:从初始化到销毁的全过程剖析
前端·javascript·vue.js·前端框架·uni-app·北京百思可瑞教育·百思可瑞教育