uniapp vue3 首页拦截如何实现

在uniapp+vue3项目中，如何实现首页的访问拦截？比如用户未登录时自动跳转到登录页，或者根据权限控制首页的访问。有没有完整的代码示例或实现思路？需要注意哪些生命周期钩子和路由守卫的配合？

2 回复

在uniapp的vue3中，可在onLoad或onShow生命周期中实现首页拦截。例如：

onLoad() {
  if (!isLogin()) {
    uni.redirectTo({ url: '/pages/login/login' })
  }
}

或使用路由拦截：

uni.addInterceptor('navigateTo', {
  invoke(e) {
    if (!isLogin() && e.url !== '/pages/login/login') {
      uni.redirectTo({ url: '/pages/login/login' })
      return false
    }
  }
})

在 UniApp + Vue 3 中，实现首页拦截（如登录验证、权限检查）可通过以下方式实现：

1. 使用页面生命周期拦截

在首页的 onLoad 或 onShow 生命周期中检查条件，若不满足则跳转到其他页面（如登录页）。

// pages/index/index.vue
<script setup>
import { onLoad, onShow } from '@dcloudio/uni-app'

// 方法1：onLoad（页面加载时触发）
onLoad(() => {
  const token = uni.getStorageSync('token')
  if (!token) {
    uni.redirectTo({ url: '/pages/login/login' })
  }
})

// 方法2：onShow（页面显示时触发）
onShow(() => {
  const isLogin = checkLoginStatus() // 自定义登录状态检查
  if (!isLogin) {
    uni.reLaunch({ url: '/pages/auth/login' })
  }
})
</script>

2. 使用全局路由拦截（推荐）

通过 uni.addInterceptor 拦截所有页面跳转，在路由前进行统一验证。

// main.js 或 App.vue
import { createApp } from 'vue'
import App from './App'

const app = createApp(App)

// 添加路由拦截器
uni.addInterceptor('navigateTo', {
  invoke(args) {
    // 检查需要拦截的页面路径
    const needAuthPages = ['/pages/user/profile', '/pages/order/list']
    if (needAuthPages.includes(args.url)) {
      const token = uni.getStorageSync('token')
      if (!token) {
        uni.redirectTo({ url: '/pages/login/login' })
        return false // 阻止原导航
      }
    }
    return true // 允许跳转
  }
})

app.mount('#app')

3. 封装权限检查函数

在需要拦截的页面中复用检查逻辑。

// utils/auth.js
export const checkAuth = () => {
  const token = uni.getStorageSync('token')
  if (!token) {
    uni.showModal({
      title: '未登录',
      content: '请先登录',
      success(res) {
        if (res.confirm) {
          uni.reLaunch({ url: '/pages/login/login' })
        }
      }
    })
    return false
  }
  return true
}

// 在页面中使用
import { checkAuth } from '@/utils/auth'
onLoad(() => {
  if (!checkAuth()) return
  // 继续页面逻辑
})

注意事项：

  • 首页拦截场景：若首页本身是需验证页面（如个人中心），直接用生命周期拦截。
  • 路由拦截范围：全局拦截适用于多页面统一验证，但需注意避免循环跳转。
  • 用户体验：可结合 uni.showToast 或 uni.showModal 提示用户。

根据具体需求选择合适方案即可。

回到顶部