路由导航守卫

//关于参数说明:


//1..to将要访问的路径

//2from从哪个路径跳转来的

// 3.next是一个函数next()表示放行next(" / Login")强制跳转
 

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue'
import ElementUI from '../components/ElementUI.vue'
import Home from '../components/Home.vue'
//使用路由机制
Vue.use(VueRouter)
const routes = [
  {path: '/', redirect: '/login'},
  {path: '/login', component: Login},
  {path: '/elementUI', component: ElementUI},
  {path: '/home' , component: Home}
]



const router = new VueRouter({
  routes
})


//路由导航守卫!!!!!!!
/*1..to将要访问的路径
 *2from从哪个路径跳转来的
 *3.next是一个函数next()表示放行next(" / Login")强制跳转
 *
 * 拦截器策略:
 *1.如果用户访问/Login登录页面直接放行
 *2.如果访问其它页面,则校验是否有token
 *有token      放行
 *没有token   跳转到登录页面
 * */


router.beforeEach( (to,from,next) => {
  if(to.path === '/login') return next()
  //获取token数据信息
  let token = window.sessionStorage.getItem('token')
  if(token === null && token === ''){
    return next("/login")
  }
  //放行请求
  next()
})

export default router

Guess you like

Origin blog.csdn.net/m0_60477159/article/details/121201990