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----------------------------