VueRouter全局前置导航守卫

VueRouter里的导航守卫分为三种：全局守卫、路由独享守卫、路由组件内的守卫，本文着重讲解使用全局前置守卫实现App的访问权限控制。

1. vue2 + vue-router3 + vuex3 环境下的全局前置守卫

# 语法
# to 要去哪
# from 从哪来
# to 和 from 都是获取路由信息对象
# next() 放行函数，等价于 this.$router.push(...) 
# next() 表示放行
# next('/路径') 强制拦截到对应的路径

router.beforeEach( (to, from, next) => {
    ...
})

import Vue from 'vue'
import VueRouter from 'vue-router'
# vuex仓库
import store from '@/store'
Vue.use(VueRouter)

const router = new VueRouter({
  routes: [...]
})

router.beforeEach((to, from, next) => {
  # 不需要登录的页面 / 白名单
  const wihteList = ['/login']
  # 如果没有Token，并且不在白名单内，转回登录页
  if (!store.state.user.token && !wihteList.includes(to.path)) return next('/login')
  # 反之放行
  next()
})

2. vue3 + vue-router4 + pinia 环境下的全局前置守卫

# 语法
# return '/login' 跳转指定地址
# 不返回, 或者 return true 就是放行
# 不推荐使用 next() 放行函数了
router.beforeEach((to, from) => {
  // ...
  // 返回 false 以取消导航
  return false
})

router.beforeEach((to) => {
  # Pinia仓库
  const store = useUserStore()
  # 不需要登录的页面 / 白名单
  const wihteList = ['/login']
  # 如果没有登录且不在白名单内, 去登录
  if (!store.user?.token && !wihteList.includes(to.path)) return '/login'
  # 否则不做任何处理
})

End----------------------------