【前端学习记录——Vue-cli】5.路由守卫

文件：在路由配置文件中添加代码。======[项目]\src\router\index.js

 

const routes = [
  { path: '/', redirect: '/login' },
  { path: '/login', component: Login },
  {
    path: '/home', component: Home,
    redirect: '/welcome',
    children: [
      { path: '/welcome', component: Welcome },
      { path:'/userManager',component:Users}
    ]
  },
]

const router = new VueRouter({
  routes
})

// 路由守卫
router.beforeEach((to, from, next) => {
  if (to.path === '/login') {
    return next();
  }
  const tokenStr = window.sessionStorage.getItem('token');
  if (!tokenStr) {
    return next('/login')
  }
  next();
});

export default router

调用路由变量router的BeforeEach方法，参数是回调函数

var f = function(to, from, next){
  if (to.path === '/login') {
    return next();
  }
  const tokenStr = window.sessionStorage.getItem('token');
  if (!tokenStr) {
    return next('/login')
  }
  next();
}

router.beforeEach(f);

这就实现了在每次路由跳转，都先判断是否在window.sessionStorage中包含token。

 

 

 

 

-------------------
补充：在main.js里应该要给axios配置一个属性

// axios.defaults.baseURL="http://wosperry.com.cn:5000/"
axios.defaults.baseURL="http://localhost:5000/"

axios.interceptors.request.use(config => {
// 验证信息
config.headers.Authorization = window.sessionStorage.getItem('token')
return config;
},error => {
// 假如错误
return Promise.reject(error);
});