vue2登录功能的实现

vue2登录功能的实现

一. 使用axios调用接口

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

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

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

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

有以下两点说明：

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

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

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

1. 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')
       }
   }
   

###三. 登录后的操作

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

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

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

1. 是什么？

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

2. 为什么？

   请求拦截器的应用场景：

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

   响应拦截器的应用场景：

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

3. 怎么做？

   // 请求拦截器,有两个参数，成功的回调和失败的回调，处理完后应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 方法。