vue-cli管理系统项目中Axios相关配置以及路由跳转相关方法

一、关于Axios请求的需求

1. 管理系统中在登录系统的时候，通常接口会返回一个flag标志位,通常我们成为token，为了再后续请求中每个接口可以通过token换取用户信息省去了，不断传token的麻烦。

//拦截AXIOS请求，设置请求头usertoken
axios.interceptors.request.use(config => {
      config.headers["UserToken"] = sessionStorage.getItem("Ldtoken")
    return config;
})

2. 日常系统管理token一直扮演一个重要的角色，在我们制作管理系统页面的过程中，通常我们会实现跳转页面，但是父级同级子组件不发生边，那么在这个时候我们通常会在路由跳转中添加 路由守卫
   方便我们在路由跳转时动态的监听路由跳转是to(去哪里)，from(从哪里来)，并且携带了那些query(携带参数)。

// 路由守卫  拦截路由判断是否有token
router.beforeEach((to,from,next)=>{
  // to要跳转到的路径
  // from从哪个路径来
  // next往下执行的回调
  // 在localStorage中获取token
  console.log(to)
  let token=sessionStorage.getItem('Ldtoken');
//   _this.$axios.defaults.headers.common['UserToken'] = token;
  // 判断该页面是否需要登录
  if(to.meta.auth){
      // 如果token存在直接跳转
      if(token){
          next()
      }else{
          // 否则跳转到login登录页面
          next({
              path:'/Login',
              // 跳转时传递参数到登录页面，以便登录后可以跳转到对应页面
              query:{
                  redirect:to.fullPath
              }
          })
      }
  }else{
      // 如果不需要登录，则直接跳转到对应页面
      next()
  }
})

在完后监听以后我们还可以实现返回上一页的操作，但是这些操作在管理系统中会较少，通常出现在移动端的登录页面。所以，移动端的路由跳转也可以搭配vuex或者BUS.js以及sessionStorage存储相关的路由数据。在用户未登录的情况下使用网站，在涉及到相关使用用户信息的时候，在用户登录完后才能以后不需要再重复的进行操作。减少操作步骤，提升软件易用性。

二、关于vue复用组件

• 在复用组件的过程我们通常会通过监听数据的变化来是实现子组件的自动更新数据，但是这个时候需要用到vuex，但是在小项目中我们通常不会使用vuex因为使用vuex会引出更多的相关的框架概念，我们通常组件间共享数据通过vuex来实现，但是这样组件并不会相应组件变化，所以我们可以通关改变传参来实现。监听跳转路由的$router的携带参数来改变参数变化。在同一路由跳转的时候通常会报错，所以我们需要在router文件下的index.js中添加以下代码：

const originalPush = VueRouter.prototype.push
   VueRouter.prototype.push = function push(location) {
   return originalPush.call(this, location).catch(err => err)
}