封装路由守卫解决vuex刷新丢失问题

注意js文件引入的是router,而不是useRouter实例化的对象

在前置守卫开启进度条加载,并且获取用户信息,确保刷新不糊丢失vuex数据

在后置守卫关闭进度条

import router from '../router'
import { getToken } from './auth';
import store from '../store';
import { toast, showLoading, hideLoading } from '../composables/utils'
import { removeToken } from '../composables/auth'
router.beforeEach(async (to, from, next) => {
  // console.log(to.meta.name);
  document.title = to.meta.name
  showLoading()//进度条
  const token = getToken()//获取token
  // 返回 false 以取消导航
  // console.log(to);
  if (!token && to.path != '/login') {
    toast('登录先!', 'error')
    return next({
      path: '/login'
    })
  }
  //防止重复登录
  if (token && to.path == '/login') {
    toast('不准重复登录!', 'error')
    return next({
      path: from.path
    })
  }
  // 如果通过了, 那就解决vuex问题
  if (token) {
    try {
      let f = await store.dispatch('getUserInfo')
      if (f == 'fail') {
        removeToken()
        return next({
          path: '/login'
        })
      }
    } catch (error) {
    }
  }  
  next()
})
router.afterEach((to, from) => {
  hideLoading()
})