【前端开发】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'
相关推荐
bug总结1 天前
身份证号脱敏的正确实现
前端·javascript·vue.js
林太白1 天前
Vite8 Beta来了,Rolldown携手Oxc
前端·javascript·后端
xkxnq1 天前
第二阶段:Vue 组件化开发(第 19天)
前端·javascript·vue.js
技术净胜1 天前
Python 操作 Cookie 完全指南,爬虫与 Web 开发实战
前端·爬虫·python
神奇的程序员1 天前
Nginx日志分析工具-NginxPulse开源了
前端
我是小疯子661 天前
前端开发入门:HTML、CSS与JS学习指南
前端
知了清语1 天前
是的,微信小程序的 show-menu-by-longpress 真的会让你无语
前端
Hao_Harrision1 天前
50天50个小项目 (React19 + Tailwindcss V4) ✨| RangeSlider(范围滑块组件)
前端·typescript·react·tailwindcss·vite7
CC码码1 天前
不修改DOM的高亮黑科技,你可能还不知道
前端·javascript·面试
虚诚1 天前
vue2中树形表格怎么实现
前端·javascript·vue.js·ecmascript·vue2·树形结构