vue-路由守卫

Posted 2020-12-12 taozhibin

import Vue from ‘vue‘
import Router from ‘vue-router‘
import Home from ‘@/components/Home‘
Vue.use(Router)

const router = new Router({
  mode: ‘history‘,
  routes: [
    {
      path: ‘/‘,
      // name: ‘Home‘,
      // component: Home
      redirect:‘/login‘
    },{
      path:‘/login‘,
      component:Login
    },{
    }
    
      
  ]
})
router.beforeEach((to,from,next)=>{    //导航守卫
   //to将要访问的路径
   //from代表冲哪一个路径跳转过来
   //next 是一个函数 表示放行   
       //next()放行   next(‘/login‘) 强制跳转到哪个页面
     if(to.path ===‘/login‘) return next()

     // 获取token
     const tokenStr= window.sessionStorage.getItem(‘token‘)  //获取sessionStorage  
     if (!tokenStr) return next(‘/login‘)    //若没有直接强制回到首页


     next()   //若存在允许放行
     
})

export default router

 

import Vue from ‘vue‘

import Router from ‘vue-router‘

import Home from ‘@/components/Home‘

import Login from ‘@/components/Login‘

import Wecome from ‘@/components/wecome‘

import User from ‘@/components/user/user‘

Vue.use(Router)

const router = new Router({

  mode: ‘history‘,

  routes: [

    {

      path: ‘/‘,

      // name: ‘Home‘,

      // component: Home

      redirect:‘/login‘

    },{

      path:‘/login‘,

      component:Login

    },{

      path: ‘/home‘,

      name: ‘Home‘,

      component: Home,

      redirect:‘/wecome‘,

      children:[{

         path: ‘/wecome‘,

         name: ‘Wecome‘,

        component: Wecome,

      },{

        path: ‘/1-2-1‘,

        name: ‘user‘,

        component: User,

      }]

    }

    

      

  ]

})

router.beforeEach((to,from,next)=>{    //导航守卫

   //to将要访问的路径

   //from代表冲哪一个路径跳转过来

   //next 是一个函数 表示放行   

       //next()放行   next(‘/login‘) 强制跳转到哪个页面

     if(to.path ===‘/login‘) return next()

     // 获取token

     const tokenStr= window.sessionStorage.getItem(‘token‘)

     if (!tokenStr) return next(‘/login‘)

     next()

     

})

export default router