【前端开发】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'
相关推荐
一路向前的月光39 分钟前
react(9)-redux
前端·javascript·react.js
大数据追光猿1 小时前
Python中的Flask深入认知&搭建前端页面?
前端·css·python·前端框架·flask·html5
莫忘初心丶1 小时前
python flask 使用教程 快速搭建一个 Web 应用
前端·python·flask
V+zmm101341 小时前
自驾游拼团小程序的设计与实现(ssm论文源码调试讲解)
java·数据库·微信小程序·小程序·毕业设计
xw52 小时前
Trae初体验
前端·trae
横冲直撞de2 小时前
前端接收后端19位数字参数,精度丢失的问题
前端
我是哈哈hh2 小时前
【JavaScript进阶】作用域&解构&箭头函数
开发语言·前端·javascript·html
摸鱼大侠想挣钱2 小时前
ActiveX控件
前端
谢尔登2 小时前
Vue 和 React 响应式的区别
前端·vue.js·react.js
后端小肥肠2 小时前
【AI编程】Java程序员如何用Cursor 3小时搞定CAS单点登录前端集成
前端·后端·cursor