vue2登录功能的实现

一. 使用axios调用接口

npm下载 axios，在 mian.js 中引入，实现全局的挂载。

import axios from 'axios'
// 将接口根地址统一写好
axios.defaults.baseURL = ''
// 将axios挂载到vue的实例上，因为在vue2中每个组件都是vue的实例
// 在别的组件中可以使用this.$http发起axios请求
Vue.prototype.$http = axios

axios调用接口的方式，根据上图来。

this. $http.get('url',{}) this.$ http.post(‘url’,{})
// 或者
this.$http({
url: ‘’,
methods: ‘get/post’,
// 若是post请求，参数传递应 data: {}
params: {}
})
```

有以下两点说明：

1.params 的方式，会将参数添加到 url 的后边，所以传递的都是字符串，无法传递参数中含有json格式的数据。若参数是json，则会强制转换为字符串来进行传递。

2.data的方式，是将参数添加到请求体（body）中，可以传递json格式的数据。

二. 对axios中拿到的值进行处理

axios的返回值是一个promise，为了方便进行数据的处理，可以用async await 来处理。

async login() {
    // 因为axios会默认对拿到的值进行包装处理，对象中的data属性是接口实际传递过来的数	  // 据对象
	const {data: res} = await this.$http.post('url', {
		username: 'zs',
    	password: '123'
	})
    console.log(res)
    // 可以进行判断，是否登录成功和跳转等,下面举个例子
    if(res.status === 200 && res.data.token) {
		// 登录成功,将token保存到本地,若接口返回的token没有固定前缀，还应加上
        window.SessionStorage.setItem("token",'Bearer ' + res.data.token)
    	// 调用路由进行跳转
        this.$router.push('/home')
    }
}

###三. 登录后的操作

在组件中可以通过导航守卫来判断，如果用户想访问主页，则判断它有无token，若有，则放行，若无，则强制跳转登陆页面。

router.beforeEach((to,from,next) => {
	const token = sessionStorage.getItem('token')
	if(to.path === '/home') {
		if(token) {
			next()
		} else {
			next('/login')	
		}
	} else {
		next()
	}
})

四. axios 的请求拦截器和响应拦截器

是什么？

在每次调用接口向后台请求数据和后台发来数据时，可以对数据进行处理。
为什么？

请求拦截器的应用场景：

例如添加统一cookie、请求体加验证、设置请求头等，相当于是对每个接口里相同操作的一个封装；例如添加统一cookie、请求体加验证、设置请求头等，相当于是对每个接口里相同操作的一个封装；设置loading。

响应拦截器的应用场景：

在请求得到响应之后，对响应体的一些处理，通常是数据统一处理等，也常来判断登录失效等。取消请求拦截器中设置的loading。

怎么做？

// 请求拦截器,有两个参数，成功的回调和失败的回调，处理完后应return
instance.interceptors.request.use(req=>{}, err=>{});
// 响应拦截器，有两个参数，成功的回调和失败的回调，处理完后应return
instance.interceptors.reponse.use(req=>{}, err=>{});

// 设置axios拦截器：请求拦截器
axios_instance.interceptors.request.use(config => {
  // config 是将要发送给请求对象，里面包含了请求方式，携带的参数等。
  //请求拦截一般会有哪些操作
  // 1.比如config中的一些信息不符合服务器的要求,这里可以做一些修改
  // 2.比如每次发送网络请求时,都希望在界面中显示一个请求的图标(然后再响应拦截中取消显示)
  // 3.某些网络请求必须携带一些特殊的信息(如登录token),如果没有携带就可以拦截并作响应提示

  // 给请求头添加token
  /*
  * 其中   /.*csrftoken=([^;.]*).*$/    是一个正则表达式，用于从cookie中获取csrftoken的值 ，
  * ([^;.]*) 是命名捕获，表示从匹配到的内容中 只获得 ()内的值。
  * string.match(regex) 得到的是一个数组， 第0项是匹配到的全部内容，第1项是通过命名捕获得到的内容，在这里就是csrftoken的值。
  * 这样就完成了使用axios发送请求的正确配置了，同时保证了网站免受csrf攻击的影响.
  */
   // 添加token,将本地存储（sessionStorage）里的id取出来
  config.headers.token = window.sessionStroage.getItem('token')
    
  config.headers['X-Requested-With'] = 'XMLHttpRequest';
  let regex = /.*csrftoken=([^;.]*).*$/; // 用于从cookie中匹配 csrftoken值
  config.headers['X-CSRFToken'] = document.cookie.match(regex) === null ? null : document.cookie.match(regex)[1];
  return config
}, err => {
  // 请求未成功发出，如：没有网络...
  return Promise.reject(err)
})

/*
// 设置axios拦截器: 响应拦截器
axios_instance.interceptors.response.use(res => {
  // 成功响应的拦截
  return Promise.resolve(res.data)
}, err =>{
  // 失败响应的拦截
  console.log(err)
  if(err.response){
    // 失败响应的status需要在response中获得
    console.log(err.response)
    switch(err.response.status){
      // 对得到的状态码的处理，具体的设置视自己的情况而定
      case 401:
          console.log('未登录')
          window.location.href='/'
          break
      case 404:
          window.location.href='/'
          break
      case 405:
          console.log('不支持的方法')
          break
      // case ...
      default:
          console.log('其他错误')
          break
    }
  }
  // 注意这里应该return promise.reject(),
  // 因为如果直接return err则在调用此实例时，响应失败了也会进入then(res=>{})而不是 reject或catch方法
  return Promise.reject(err)
})
*/


export {
  axios_instance
}

特别注意：在请求和拦截处理完后应return config，若请求和拦截失败了，需 return promise.reject(), 因为如果直接return err则在调用此实例时，响应失败了也会进入 then(res=>{})而不是 reject 或 catch 方法。