导航守卫: https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

一. 路由导航守卫

const router = new Router({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

to： 将要访问的路由路径
from： 当前导航正要离开的路由
next： 是一个函数，放行
next()： 放行
next('/login)： 强制跳转
next(false)：中断当前的导航

二. 路由导航守卫 简单使用

登录

methods: {
  login() {
    window.localStorage.setItem("token", "this is token");
    this.$router.push("/index");
  },
},

路由

const router = new Router({
  routes: [
    {path:'/',redirect:'/login'},
    {path: '/login', component: ()=>import('@/components/Login.vue')},
    {path:'/home',component:()=>import('@/components/Index.vue')}
  ]
})

//挂载路由导航守卫
router.beforeEach((to,from,next)=>{
  //如果用户访问的是登录页面，则直接放行
  if(to.path === '/login'){
    next()
  }else{
    //从本地缓存中获取保存的 token 值（这里实用的是 localStorage ）
    const tokenStr = window.localStorage.getItem('token')
    //如果没有token，强制跳转到登录页面，如果有，则直接放行
    if(!tokenStr){
      next('/login')
    }else{
      next()
    }
  }
})

export default router

三. 使用路由导航守卫设置 token 过期时间

登录

methods: {
  login() {
    let tokenObj = {
      token: "this is token",// token 值自定义
      startTime: new Date().getTime(),// 获取当前时间(从1970.1.1开始的毫秒数)
    };
    window.localStorage.setItem("token", JSON.stringify(tokenObj));
    this.$router.push("/index");
  },
},

路由

const router = new Router({
  routes: [
    {path:'/',redirect:'/login'},
    {path: '/login', component: ()=>import('@/components/Login.vue')},
    {path:'/home',component:()=>import('@/components/Index.vue')}
  ]
})

// 设置登录过期时间（毫秒）
// 这里设置的为5秒（5000毫秒）
let overdue_time = 5000
// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
  // 从本地缓存中获取保存的 token 信息
  const tokenObj = JSON.parse(window.localStorage.getItem('token'))
  if (to.path === "/login") {
    next()
  } else {
    // 如果没有token，强制跳转到登录页面；如果有，则判断token时间是否过期
    if (!tokenObj || !tokenObj.token) {
      next('/login')
    } else {
      let date = new Date().getTime();
      // 当前时间 - token中的登录时间 > 设置的过期时间，为过期；则清除token，并强制跳转至登录页
      // 反之为有效期，则放行
      if (date - tokenObj.startTime > overdue_time) {
        window.localStorage.removeItem('token');
        next('/login')
      } else {
        next();
      }
    }
  }
})

export default router