关于app封装 搭建，注册登录以及 关于token的一些理解

一、封装api 搭建

　　封装api主要是为了将一些可以复用的接口放在一起减少在页面编辑中的代码，防止一些因端口错误产生的问题　　　

　　先搭建一个api文件夹，在其中创建一个index.js文件用来封装代码的接口，

　　--------------------------------------------------------------------------

 

　　import { requset } from "./core";

　　import urlType from "./config";//引入请求参数

　　const ClientAPI = {

  　　  // 封装请求函数（方法）

  　　  // 例如：登录接口

  　　  // Login(params){

  　　  //    return requset(urlType.type.GET,urlType.url.LOGIN,params) 

  　　  // }

 　　   // 轮播图

 

　　}

　　export default ClientAPI;

 

　　----------------------------------------------------------------------------

　　创建一个core.js文件可以封装一些请求方法与拦截，并将公共地址放入其中以便引用

------------------------------------------------------------------------------------------------------------------------------------

 

import axios from "axios";//引入axios模块

import urlType from "./config";

// import Vue from 'vue';

import { Toast } from 'vant';

import {Guid} from "./guid";

var id = localStorage.getItem("deviceid");

let deviceid = null;

if(id){

  deviceid = id

}else{

  deviceid = Guid.NewGuid().ToString("D");

}

localStorage.setItem("deviceid",deviceid)

// 创建实例

const instance = axios.create({

  baseURL: 'http://120.53.31.103:84',//公用路径

  timeout: 6000,//设置超时时间

  // headers: { 'X-Custom-Header': 'foobar' }//设置请求头

});

//   拦截器

// 添加请求拦截器

instance.interceptors.request.use(function (config) {

    // 在发送请求之前做些什么

    Toast.loading({

      duration:0,

      message: '加载中...',

      forbidClick: true,

    });

    var token = localStorage.getItem("token");

    if(token){

      config.headers.authorization = `Bearer ${token}`;

    }

    config.headers.deviceid = deviceid;

    config.headers.devicetype = "H5";

    return config;

  }, function (error) {

    // 对请求错误做些什么

    return Promise.reject(error);

  });

// 添加响应拦截器

instance.interceptors.response.use(function (response) {

    // 对响应数据做点什么

    Toast.clear();

    return response;

  }, function (error) {

    // 对响应错误做点什么

    return Promise.reject(error);

  });

//   判断是get请求还是post请求

export function requset(type, url, params) {

  switch (type) {

    case urlType.type.GET:

      return get(url, params);

    case urlType.type.POST:

      return post(url, params);

  }

}

//   封装get请求

function get(url, params) {

  return instance.get(url, params);

}

// 封装post请求

function post(url, params) {

  return instance.post(url, params);

}

 

-----------------------------------------------------------------------------------------------------------------------------------

　　创建一个config.js文件，将api路径配置其中

-------------------------------------------------------------------------------------------------------------------------------

const urlType = {

    // 配置API路径

    url: {

        // 例如：

        // 轮播图

        Banner: "/api/app/banner",

    },

    type: {

        GET: "get",

        POST: "post"

    }

}

export default urlType;

-------------------------------------------------------------------------------------------------------------------------------

最后就可在main.js文件中进行全局配置，然后就可更好的实现api端口的获取

 

二、注册登录以及token的使用

　 在前端中，登录注册需要通过端口来获取数据并传递参数，并进行判断事件的执行获取得到的登录信息以及一个token值

　　token是服务端生成的一串字符串，以作客户端进行请求的一个令牌,　

　　它相当于数据的id，给与数据一个唯一的标识，它的出现主要目的是解决服务器频繁请求用户姓名以及密码的问题；

　　它的作用是减轻服务器的压力，减少频繁的查询数据库，使服务器更加健壮。

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

    // 请求登录接口并传递参数

      this.$ClientAPI

        .loginGetToken(obj)

        .then((res) => {

          console.log(res.data.data);

          var token = res.data.data.remember_token; //读取token

          var mobile = res.data.data.mobile;

          localStorage.setItem("mobile", mobile);

          localStorage.setItem("token", token); //保存token

          localStorage.setItem("value", "admin");

          Toast.success({

            message: "登录成功",

            position: "top",

          });

          this.$router.push("/mine"); //跳转到我的页面

        })

        .catch((err) => {

          console.log(err);

          Toast.fail({

            message: "登录失败",

            position: "top",

          });

        });

----------------------------------------------------------------------------------------------------------------------------------