vue开发app搭建项目，注册登录以及token理解与心得

亦凉 2022-11-21 06:57 58阅读 0赞

### 文章目录 ###

*  前言
 *  一、项目主要内容
 *  二、技术栈
 *  三、项目目录
 *  四、APP登录
 *   *   *   *  1.token
             *  2.token验证
 *  五、开发问题
 *  总结

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

# 前言 #

最近团队协作开发了一款app项目，主要为了方便用户日常生活中可以随时随地学习，为学习提供了便利。这篇博客主要是讲一些本人及开发团队在开发项目中注册登录部分的业务逻辑，以及团队协作中遇到的问题，警醒后人！

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

# 一、项目主要内容 #

此项目是一款线上教育平台，目前已经跟国内很多高校展开合作，用户可以随时随地和高校名师进行交流学习，下面是项目地址  
[项目链接地址][Link 1]

# 二、技术栈 #

1.axios(封装接口，请求数据)  
2.vant-ui (有赞公司出品移动端ui库)  
3.better-scroll(移动端滑屏插件)  
4.vuex-persist (vuex数据持久化配置)

# 三、项目目录 #

![在这里插入图片描述][20201030211002198.png_pic_center]

# 四、APP登录 #

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

#### 1.token ####

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

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

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

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

#### 2.token验证 ####

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

serve.interceptors.request.use((config) => { 
        // token验证请求
        let token = JSON.parse(window.sessionStorage.getItem("token"))
        if(token){ 
            config.headers.Authorization = `Bearer ${ token}`
        }
        config.headers.deviceid = deviceid;
        config.headers.devicetype = "H5";
        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")
      }

# 五、开发问题 #

1.  因为使用的是better-scroll插件，经常出现better-scroll在数据还没有加载完成 ，就已经实例化，导致页面不能滑动

mounted() { 
        this.getBanner();
        this.getIndex();
        this.bs = new BetterScroll(this.$refs.scrollBox, { 
          probeType: 3,
          click: true
        });
        this.bs.on("scroll",(pos)=>{ 
          if(pos.y>=0){ 
            this.bs.scrollTo(0,0)
          }
        })
      },

解决方法，使用监听响应数据，用refresh()方法，刷新页面

watch: { 
        starLecturer() { 
          this.$nextTick(() => { 
            this.bs.refresh();
          });
        }
      }

# 总结 #

以上就是目前本人在实际开发中遇到的问题，当然，也有很多不足，希望大佬们多多指正，谢谢大家！非常感谢看我的文章！！

[Link 1]: https://wap.365msmk.com/index
[20201030211002198.png_pic_center]: /images/20221120/c3fe45ca702c47269b050dab7f633077.png