VUE项目后台管理系统（三）退出功能，清除cookie，跳转到首页，控制有cookie才可以进其他页面

最新推荐文章于 2025-11-19 10:48:37 发布

原创最新推荐文章于 2025-11-19 10:48:37 发布 · 2.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Vue 专栏收录该内容

60 篇文章

订阅专栏

本文介绍了如何在Vue应用中使用路由导航守卫，通过实例演示了如何在用户访问 '/login' 以外的页面前检查会话Token，确保权限控制。

路由导航守卫

import Vue from 'vue'
import VueRouter from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/components/Login'

Vue.use(VueRouter)

const routes=
 [
    {
      path: '/',
      name: 'HelloWorld',
      redirect: '/login',
      component: HelloWorld
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/home',
      name: 'home',
      component: HelloWorld
    },
  ]
 const router =new VueRouter({
   routes
 })


// 路由导航守卫

router.beforeEach((to,form,next)=>{
  if(to.path == '/login'){
    next()
  }else{
    const token = window.sessionStorage.getItem('token');
    if(!token){
        next('/login')
    }else{
        next()
    }


  }
})


export default router