vue2.0+koa2+mongodb实现注册登录(4)

日期：2020-05-11 栏目：程序人生浏览：次

可以看到我们通过actions提交mutation，进行token的更改、清除以及用户名储存的操作。

此时启动项目，可以看到初步的注册登录界面，点击注册或登录按钮可以切换到相应界面，并有基础的表单验证，登录后会进入helloworld页面。

我们写好了基础界面，接下来就是要把表单数据发送到后台并进行一系列处理。现在还没有后端接口没关系，我们先写好前端axios请求。

axios

vue的通讯之前使用 vue-resource ，有很多坑。直到vue2.0来临，直接抛弃 vue-resource ，而使用 axios 。

用途：

封装ajax，用来发送请求，异步获取数据。以Promise为基础的HTTP客户端，适用于：浏览器和node.js。

具体API中文说明： https://www.kancloud.cn/yunye/axios/234845

安装

$ cnpm i -S axios

引入

import axios from 'axios'

拦截器

在设置vue-router那部分加入了路由守卫拦截需要登录的路由，但这种方式只是简单的前端路由控制，并不能真正阻止用户访问需要登录权限的路由。当token失效了，但token依然保存在本地。这时候你去访问需要登录权限的路由时，实际上应该让用户重新登录。这时候就需要拦截器 interceptors + 后端接口返回的http状态码来判断。

在src文件夹下面新建axios.js(和App.vue同级)

//axios.js
import axios from 'axios'
import store from './store'
import router from './router'

//创建axios实例
var instance = axios.create({
 timeout: 5000, //请求超过5秒即超时返回错误
 headers: { 'Content-Type': 'application/json;charset=UTF-8' },
});

//request拦截器
instance.interceptors.request.use(
 config => {
  //判断是否存在token，如果存在的话，则每个http header都加上token
  if (store.state.token) {
   config.headers.Authorization = `token ${store.state.token}`;
  }
  return config;
 }
);

//respone拦截器
instance.interceptors.response.use(
 response => {
  return response;
 },
 error => { //默认除了2XX之外的都是错误的，就会走这里
  if (error.response) {
   switch (error.response.status) {
    case 401:
     router.replace({ //跳转到登录页面
      path: 'login',
      query: { redirect: router.currentRoute.fullPath } // 将跳转的路由path作为参数，登录成功后跳转到该路由
     });
   }
  }
  return Promise.reject(error.response);
 }
);

export default {
  //用户注册
  userRegister(data){
    return instance.post('/api/register', data);
  },
  //用户登录
  userLogin(data){
    return instance.post('/api/login', data); 
  },
  //获取用户
  getUser(){
    return instance.get('/api/user');
  },
  //删除用户
  delUser(data){
    return instance.post('/api/delUser', data);
  }
}

转载注明出处：http://www.heiqu.com/396.html

vue2.0+koa2+mongodb实现注册登录(4)

相关推荐