欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

164Vue工程化2-挂载路由导航守卫+退出清除token+axios请求拦截器添加携带token

程序员文章站 2022-06-19 14:05:21
router文件夹的index.js// 挂载路由导航守卫router.beforeEach((to, from, next) => { // to 将要访问的路径 // from 代表从哪个路径跳转而来 // next 是一个函数,表示放行 // next() 放行 next('/login') 强制跳转 if (to.path === '/login') return next() // 获取token const tokenStr = win...

router文件夹的index.js
164Vue工程化2-挂载路由导航守卫+退出清除token+axios请求拦截器添加携带token

// 挂载路由导航守卫
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()
})

退出清除token

164Vue工程化2-挂载路由导航守卫+退出清除token+axios请求拦截器添加携带token

164Vue工程化2-挂载路由导航守卫+退出清除token+axios请求拦截器添加携带token

axios请求拦截器添加携带token

config.headers就是请求头
164Vue工程化2-挂载路由导航守卫+退出清除token+axios请求拦截器添加携带token

// 请求拦截器
axios.interceptors.request.use(config => {
  // console.log(config)
  config.headers.Authorization = window.sessionStorage.getItem('token')
  // 在最后必须 return config
  return config
})

本文地址:https://blog.csdn.net/Gy_9543/article/details/107946773

相关标签: vue