vuerouter拦截?

写法如下,在路由文件中加入router.forEach的方法router.forEach((to,form,next)=>{})

import Vue from 'vue'
import Router from 'vue-router'
import AddStudent from '@/components/AddStudent.vue'
import Success from '@/components/success.vue'
const path = require('./handleRouter.js')
const fs = require('fs')
// console.log(path)
fs.readFile(path + '/AddStudent.vue', function (err, data) {
  if (err) {
    return console.error(err)
  }
  console.log('异步读取: ' + data.toString())
  console.log('data.toString()')
  console.log(data)
})
// const path = require.context('../components', true, /\.vue$/)
// console.log(path)
Vue.use(Router)
console.log('AddStudent')
console.log(AddStudent)
const router = new Router({
  // base: '/mp/',
  routes: [
    {
      path: '/',
      name: 'AddStudent',
      component: AddStudent,
      meta: {
        auth: 'fuck'
      }
    },
    {
      path: '/login',
      name: 'Login',
      component: () => import('@/components/login.vue')
    },
    {
      path: '/success',
      name: 'Success',
      component: Success,
      meta: {
        auth: 'diu'
      }
    }
  ]
})

router.beforeEach((to, form, next) => {
  if (to.meta.auth === 'fuck') {
    next({
      path: '/login'
    })
  } else {
    next()
  }
})

export default router

如上代码,可以判断meta元信息的auth的值是否是有权限之类的再进行跳转,可以控制页面流程
如下代码是根据请求修改的一些值

import axios from 'axios'
import { Notification } from 'element-ui'
// import qs from 'qs'
// 配置环境
// let baseUrl = 'http://127.0.0.1:8080'
// let baseUrlArr = [
//   {
//     type: 'development',
//     url: 'http://127.0.0.1:8080'
//   },
//   {
//     type: 'test',
//     url: 'http://127.0.0.1:8080'
//   },
//   {
//     type: 'production',
//     url: 'http://127.0.0.1:8080'
//   }
// ]
switch (process.env.NODE_ENV) {
  case 'production':// 生产
    axios.defaults.baseURL = 'http://xcx.gzfysyxx.com'
    break
  case 'test':// 测试
    axios.defaults.baseURL = 'http://xcx.gzfysyxx.com'
    break
  default:// 开发
    axios.defaults.baseURL = 'http://xcx.gzfysyxx.com'
}
axios.defaults.baseURL = 'http://kaizen.gz2vip.idcfengye.com'

// axios.defaults.baseURL = 'http://localhost:8080'
// axios.defaults.headers.commen['Authorization'] = '这是Token'
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

// 超时时间和跨域是否允许携带凭证和请求头
axios.defaults.timeout = 50000
axios.defaults.withCredentials = true
axios.defaults.headers['Content-Type'] = 'application/json'// 请求所传的数据是requestploy
// axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded'// 请求所传的数据是formdata
// axios.defaults.headers['Content-Type'] = 'application/json'
// 请求参数传递
// axios.defaults.transformRequest = data => qs.stringify(data)// 方式和get明文一致,但是已经经过编码,

// 拦截器 ,权限校验token,vuex->本地存储,发请求前
axios.interceptors.request.use(config => {
  // 携带token
  let token = localStorage.getItem('token')
  token && (config.headers.Authorization = token)
  let code = localStorage.getItem('code')
  code && (config.headers.code = code)
  return config
}, error => {
  return Promise.reject(error)
})

// 响应拦截器
axios.interceptors.response.use(respose => {
  // respose是一个对象有data,status,headers的返回
  console.log('请求成功')
  console.log(respose)
  return respose.data// 能返回的是在调用之后处理
}, error => { // 不能返回的,就不能就在这里做处理
  let { response } = error
  let data = response.data
  if (data) {
    // => 服务器起码返回了结果
    switch (data.status) { // 根据公司需要判断,一下可以跳页面,也可以弹消息
      case 400:
        Notification.error({
          title: data.status,
          message: data.message
        })
        break
      case 401: // =>权限,可以判断是否登录
        // ElementUI.$notify.error({
        //   title: '权限',
        //   message: '没有权限'
        // })
        break
      case 403: // =>token过期(一般),拒绝请求
        break
      case 404: // =>找不到
        break
    }
    return Promise.reject(error)
  } else {
    // => 服务器连结果都没有返回
    if (!window.navigator.onLine) {
      // 断网页面
      return 0
    }
    return Promise.reject(error)
  }
})

export default axios

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值