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

前言

作为一名入行不久的前端小白，最近协同开发一款App项目。特次来分享一些开发过程中总结出的心得，希望能够帮助到大家。

---

一、App开发是什么？

简单说一下App开发，App开发，是指专注于手机应用软件开发与服务。 App是application的缩写，通常专指手机上的应用软件，或称手机客户端。另外有很多在线app开发平台。
移动互联网时代是全民的移动互联网时代，是每个人的时代，也是每个企业的时代。APP便捷了每个人的生活，APP开发让每个企业都开始了移动信息化进程。
所以对一个前端开发人员来说，app开发是必会的。

二、App布局

App开发与pc开发最大的不同应该是布局单位的改变，如果使用px会导致不同手机大小显示的内容不同，所以要进行单位的改变

1.rem

用js根据不同的视窗宽度动态的改变根元素的font-size来进行适配

function rem(){
	//根据设备的宽设置html的字体大小
	document.documentElement.style.fontSize = document.documentElement.clientWidth/4 + "px";
}
rem();
//当窗口改变时，
window.onresize = rem;
//1rem = 100px

2.vw 响应式布局

根据 PSD 文件宽度或高度作为标准，元素单位 px 转换为 vw 或 vh，比如font-size: 12px，PSD 文件宽度 375，转换公式 12 * 100 / 375，则样式改为font-size: 3.2vw，

三、App登录

除了布局之外，登录功能也是项目的一大难点，主要说一下token

1.token

在计算机身份认证中是令牌（临时）的意思，在词法分析中是标记的意思。一般作为邀请、登录系统使用。主要作用是确认用户的身份，帮助用户保护个人信息。

使用起来十分简单，只需要在发送登录请求时将后台返回的token令牌保存到本地就可以了

 window.sessionStorage.setItem("token", data.data.remember_token);

一般使用的sessionStorage，相对于 localStorage来说更加的安全

2.token验证

获取token后需要验证在请求拦截中进行本地token的验证，如果存在将其存入到请求头中

axios.interceptors.request.use((config) => {
    // token验证请求
    if (window.sessionStorage.getItem('token')) {
        config.headers.Authorization = ${window.sessionStorage.getItem('token')}
    }
    return config
})

如果在用户在同一页面存在时间过久没有操作就说明用户离开了，为了防止其他人获取用户信息需要在响应拦截进行验证

axios.interceptors.response.use(config => {
    // token验证响应
    if (config.data.code == 400) {
        window.sessionStorage.removeItem("token")
    }
    return config
})

当用户没有进行登录时需要强制跳转到登录页面进行登录使用路由钩子进行跳转

if ( !window.sessionStorage.getItem("token")) {
      next("/Login")
  }

---

# 总结 以上就是今天要讲的内容，因为本人能力有限仅仅是介绍了一些布局和登录的内容。App开发是极其复杂的，以上内容有错误的希望各位大神在评论区指正。