1 12.全局路由拦截实现登录判断

导航守卫 | Vue Router

• 全局前置守卫

继承上章节内容,创建文件permission.js

// src/permission.js

import router  from './router'
import { getToken } from '~/composables/auth'
import { toast } from '~/composables/util'


// 全局前置守卫
router.beforeEach((to, from, next) => {
    const token = getToken()
    
    // 没有登录，强制跳转到登录页面
    if(!token && to.path != '/login') {
        toast('请先登录', 'error')
        return next({ path: "/login"})
    }


    // 防止重复登录
    if(token && to.path == '/login'){
        return next({ path: from.path ? from.path: '/'})
    }
    next()
  })

• 添加到入口文件

  main.js

// main.js
import './permission'