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

创建项目

入口文件

main.js 
1.路由
2.vuex
3.vant
4.axios全局使用
5.elementUI
6.common.css公共样式文件
7.filters.js     （放入到新创建util文件夹中，引入到main.js）
8.一些好用的方法放到 plugins.js   （放入到新创建util文件夹中,引入到main.js）

页面级vue组件

统一放到 views文件夹中
登录相关的都放在登录文件夹里，首页都放在首页文件夹里。
比如：
	login：在 views 文件夹中创建一个login文件夹
	把相关注册 忘记密码 登录等vue文件都放进这个login文件夹中

组建级vue组件

所有组件类型的vue文件，放在components中管理
主要是存放一些可以复用的组件，比如头部组件，轮播图组件等等。

Axios封装api和携带token，devicetype，deviceid

封装API主要的是可以更好的管理请求数据
封装步骤如下：
1、在src下创建一个utils文件夹
2、在utils文件夹下创建两个js文件request.js文件用来封装我们的axios，api.js用来统一管理我们的接口。

封装的步骤

request.js

// 在request.js中引入axios
import axios from 'axios'; // 引入axios
// 初始化设备ID
let deviceid = null
// 现获取设备ID如果有使用之前的
let id = localStorage.getItem("deviceid")
if (id) {
    
    
  deviceid = id
} else {
    
    
  deviceid = Guid.NewGuid().ToString("D")
}
// 写入设备ID
localStorage.setItem("deviceid", deviceid)
let config = {
    
    
  baseURL: // 设置公用地址
  timeout: 60 * 1000, // 设置请求超时时间
};
const _axios = axios.create(config);
// 请求拦截
_axios.interceptors.request.use(
  function (config) {
    
    
    // 开启loading
    Toast.loading({
    
    
      message: '加载中...',
    });
    // token请求头
    let token = sessionStorage.getItem("token")
    if (token) {
    
    
      config.headers.Authorization = `Bearer ${
      
      token}`
    }
    // devicetype
    config.headers.devicetype = "H5"
    // 设备ID
    config.headers.deviceid = deviceid
    return config;
  },
  function (error) {
    
    
    return Promise.reject(error);
  }
);
// 响应拦截
_axios.interceptors.response.use(
  function (response) {
    
    
    // 停止loading
    Toast.clear()
    return response;
  },
  function (error) {
    
    
    return Promise.reject(error);
  }
);
// 默认导出_axios
export default _axios;

api.js

// 引用request.js
import axios from "./request.js";
// 封装的方法
/**
 * get方法，对应get请求
 * @param {String} url [请求的url地址]
 * @param {Object} data [请求时携带的参数]
 */
export function get(url, data) {
    
    
    return new Promise((resolve, reject) => {
    
    
        axios.get(url, {
    
    params: data}).then(res => {
    
    
            resolve(res.data);
        })
        .catch(err => {
    
    
            reject(err.data);
        });
    });
}

/**
 * post方法，对应post请求
 * @param {String} url [请求的url地址]
 * @param {Object} data [请求时携带的参数]
 */
export function post(url, data) {
    
    
    return new Promise((resolve, reject) => {
    
    
        axios.post(url, data).then(res => {
    
    
            resolve(res.data);
        })
        .catch(err => {
    
    
            reject(err.data);
        });
    });
}
/**
 * put方法，对应put请求
 * @param {String} url [请求的url地址]
 * @param {Object} data [请求时携带的参数]
 */
export function put(url, data) {
    
    
    return new Promise((resolve, reject) => {
    
    
        axios.put(url, data).then(res => {
    
    
            resolve(res.data);
        }).catch(err => {
    
    
            reject(err.data);
        });
    });
}
// 方法的使用
export const AjaxLogin = data => post(url：地址路径, data：传递的参数); 

登录

 // 登录
    async onSubmit(values) {
    
    
      let pattern = /^1[3|4|5|7|8][0-9]{9}$/; // 手机号正则
      let pass = /^[0-9]{6,12}$/; // 密码正则
      if (pattern.test(this.mobile)) {
    
    
        if (pass.test(this.password)) {
    
    
          let res = await AjaxLogin({
    
    
            mobile: this.mobile,
            password: this.password,
            type: this.type
          });
          if (res.code == 200) {
    
    
            sessionStorage.setItem("token", res.data.remember_token); // 登录成功储存token
            this.$toast.success("登录成功");
            this.$router.push("/person");
          }
          console.log(res);
        } else {
    
    
          this.$toast("密码必须是6-12位的数字");
        }
      } else {
    
    
        this.$toast("请输入正确的手机号");
      }
    }
  },
携带的token,devicetype，deviceid 请看上文封装request.js

密码登录

密码登陆是用户已经注册过才可以使用一种登录方式。
写登录的注意事项
正则验证 在data创建的变量正则不能加引号，加引号就变成字符串了，验证时就会错误

验证码注册登录

只有注册之后才能使用密码登录功能
注册会使用到验证码 点击获取验证码之后会提示已经发送，获取验证码会变成灰色和有个60s的倒计时

首次登录

首次注册登录跳转到设置密码页面，设置密码页面可以跳过或者设置完跳转到设置个人信息页面，首次登录会跳转到首页，不是首次登录会跳转到我的页面