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

代码模块 专栏收录该内容
5 篇文章 0 订阅

一、App开发是什么?

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

二、App布局

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

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

三,打包APP

 build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),
 
    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',
 
    /**
     * Source Maps
     */
 
    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

四、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")
  }
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值