[JavaScript知识库]vue3.2路由守卫

含义：路由跳转的一些验证，比如登陆鉴权（没有登陆，不能进入个人中心等）

参数：

1.to:要进入的目标路由（去哪儿）

2.from：要离开的路由（从哪儿来）

3.next:是否进行下一步（要不要继续）

next用法：

1.写next()===next(true)继续执行，

2.不写next()===next(false)终止执行，

3.next(path)跳转，eg: next('/login')

步骤：

1、@/router/permission.js---------建立路由守卫的文件

// 使用路由(路由守卫)
import router from './index'
// 判断是否登录，需要拿到token,所以引入vuex
import store from '@/store'

// 定义白名单，不需要token(登录)也可以进入的页面
const whiteList = ['/login']
// 路由守卫
router.beforeEach((to, from, next) => {
  // 有token,
  if (store.getters.token) {
    // 有token还要去登录页，没有必要，让他跳转到首页
    if (to.path === '/login') {
      next('/')
    } else {
      // 有token可以去其他的页面
      next()
    }
  } else {
    // 没有token
    // 如果在白名单，继续操作
    if (whiteList.includes(to.path)) {
      next()
    } else {
      // 没有在白名单，则跳转到登陆页面
      next('/login')
    }
  }
})

2.@/store/getters.js----------方便拿取token

export default {
  token: (state) => state.app.token
}

3.@/store/index.js-------------引入getters

import getters from './getters'
export default createStore({
  getters
})

4.main.js引入

import '@/router/permission'