uniapp路由守卫判断

Uniapp 提供了全局路由守卫和局部路由守卫两种方式来进行路由判断。

全局路由守卫：

在 `main.js` 文件中可以通过 `router.beforeEach()` 方法来设置全局路由守卫，该守卫会在每个路由跳转前执行。可以在守卫中判断用户是否已经登录，或者其他需要判断的条件。

示例代码：

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

router.beforeEach((to, from, next) => {
  // 判断用户是否已经登录
  if (to.meta.requireAuth && !localStorage.getItem('token')) {
    next({
      path: '/login',
      query: { redirect: to.fullPath } // 记录当前路由，登录成功后跳转到该路由
    })
  } else {
    next()
  }
})

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

局部路由守卫：

在路由配置文件中可以通过 `beforeEnter` 属性来设置局部路由守卫，该守卫只对当前路由生效，可以在守卫中进行一些特定的判断，如权限判断等。

示例代码：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import About from '@/components/About'
import Contact from '@/components/Contact'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
      beforeEnter: (to, from, next) => {
        // 判断用户是否已经登录
        if (to.meta.requireAuth && !localStorage.getItem('token')) {
          next({
            path: '/login',
            query: { redirect: to.fullPath } // 记录当前路由，登录成功后跳转到该路由
          })
        } else {
          next()
        }
      }
    },
    {
      path: '/about',
      name: 'About',
      component: About
    },
    {
      path: '/contact',
      name: 'Contact',
      component: Contact,
      meta: {
        requireAuth: true // 需要登录才能访问
      }
    }
  ]
})

export default router