#前端#项目#登录拦截 -跳回登录页面

Vue.use(Router)
const  routes = [
  {
    path: '/login',
    name:'login',
    component: Login
  },
  {
    path:'/',
    component: DashBoard,
    redirect:'cake/new',
    children:[
      {
        path: '/cake/new',
        name: 'newCake',
        component: NewCake,
        meta: {
          title: '添加蛋糕',

        }
      }, {
        path: '/cake/tips',
        name: 'Tips',
        component: Tips,
        meta: {
          title: '用户提示页',

        }
      }, {
        path: '/cake/upload',
        name: 'Upload',
        component: UploadView,
        meta: {
          title: '上传图片根据',
          keepAlive: true
        }
      },{
        path: '/cake/manager',
        component: CakeTable
      },{
        path: '/example/chart',
        component: EchartExample
      },{
        path: '/cake/edit',
        component: EditView
      },
    ]
  },
]
const  router = new Router({
  routes
})

export default router;
import axios from 'axios'
import {baseURL} from "../config/baseconfig";


router.beforeEach((to,from,next) => {
  return next()
  //to: 将要访问的路径
  //next 放行函数，强制跳转路径 next(url)
  if(to.path=='/login') return next()

  let token = window.sessionStorage.getItem('token')
  if(!token) {
    return next('/login')
  }
  next()


})

axios.defaults.baseURL = '/'
/*
axios.interceptors.request.use(config=>{
  //请求头的token 从本地缓存中获取

  const token = window.sessionStorage.getItem('token')
  // console.log("token: ${token}"+token)
  // config.headers.token = token

  config.headers={
    'token':token,

    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Headers": "X-Requested-With,Content-Type",
    "Access-Control-Allow-Methods":"PUT,POST,GET,DELETE,OPTIONS"
  }
  console.log("request -->"+JSON.stringify(config))
  return config
})
*/
axios.interceptors.response.use(response => {
    //拦截响应，做统一处理
    console.log("resp -->"+JSON.stringify(response.data))
    if(response.data.code==666) {

      router.replace({

        name:'login'
      })
      message.warning('用户身份已经过期,请重新登录')
    }
    return response
  },
  //接口错误状态处理，也就是说无响应时的处理
  error => {
    return Promise.reject(error.response.status) // 返回接口返回的错误信息
  }
)

---

如果后端返回的状态码是 666的话，调回登录页面

---

后端接口设置

  response.setHeader("Access-Control-Allow-Headers", "access-control-allow-origin, authority, content-type, version-info, X-Requested-With,token");

axios.interceptors.request.use(config=>{
  //请求头的token 从本地缓存中获取

  const token = window.sessionStorage.getItem('token')
  // console.log("token: ${token}"+token)
  // config.headers.token = token

  config.headers['token'] = window.localStorage.getItem('token')

  console.log("request -->"+JSON.stringify(config))
  return config
})