vue-cli项目使用axios实现登录拦截

Posted 2020-11-19 zjwxy

登录拦截

一。路由拦截

项目中某些页面需要用户登录后才可以访问，在路由配置中添加一个字段requireAuth

• 在router/index.js中

  const router = new Router({
    routes: [
  {
    //登陆
    path:‘/Login‘,
    component:Login
  },
  {
    //用户中心
    path:‘/UserCenter‘,
    component:UserCenter,
    meta: {
      requireAuth: true
    },
  }
    ]
  })
  router.beforeEach((to, from, next) => {
    if (to.matched.some(res => res.meta.requireAuth)) {// 判断是否需要登录权限
  if (localStorage.getItem(‘token‘)) {// 判断是否登录
    next()
  } else {// 没登录则跳转到登录界面
    next({
      path: ‘/Login‘,
      query: {redirect: to.fullPath}
    })
  }
    } else {
  next()
    }
  })
  export default router

二，axios请求拦截，