三、前端-路由鉴权

1、通过路由的两个守卫实现

import router from '@/router/index.js
import Npogress from '@npogress'
import '@/npogress/npogress.css'
import userAPI from '@/util/user/api.js'

// 前置守卫  访问某一个路由之前
router.beforeEach(async(to,from,next)=>{
 // 页面路径显示
 document.title = '超级管理项目-'+to.meta.title
 Npogress.start() 
 let token = localstore.gettime('token')
 let username = localstore.getttime('username')
 // 判断有没有token
 if(token){
   // 登录成功
   if(to.path==='/login'){
     next({path:'/'})
   }else{
     // 有用户信息放行 
     if(username){
      next() 
     }else{
       try{
         // 没有用户信息发起请求获取用户信息
         let result = userAPI.userlogin('')
         if(result.ActionType==='OK'){
           // 登录成功重新获取token存储到localStore
           locatStore.settime('token',result.data.actiontype)
           next()
         }
       }catch{
         // token过期 用户修改本地存储token
         // 发起退出登录请求=>退出登录=>清空用户所有信息
         let result = userAPI.loginout()
         if(result.ActionType === "OK"){
           // 退出成功
           to({path:'/login',query:{redirect:to.path}})
         }
       }
     }
   }
   
 }else{
   // 如果没有token只能去login页面
   if(to.path=='/login'){
     next()
   }else{
     // 如果去其他页面自动跳转login页面
     next({path:'/login',query:{redirect:to.path}})
   }
 }
})

// 后置守卫  离开某一个路由之前
router.afterEach(async(to,from,next)=>{
  Npogress.done()
})