小白用vue写项目的心路历程，登录篇

首先，介绍一下我在做的这个项目，名字叫毕业设计系统，这个系统是我们学院在明年要投入使用的一个系统，主要功能就是提供一个选题、审题的平台，和大多数系统一样，用户分为不同的角色，有教师、学生、专业负责人、管理员这四个角色，细节就先不讲了，我先做了个本地的登录，模拟角色的区分，进而显示不同的菜单，我刚学vue的时候被灌输的思想是万物组件化，把我坑惨了，当然在登录这里并没有体现，我写了一个登录组件，在vue-router中把登录组件的路由与登陆进入的界面的组件的路由设为同一级，vue一般实现单页面应用，vue中的模块化是非常明显的，在最初写的时候，我的天哪，我就差把每一行都模块化了，分的很细，其实只是为了省一次写代码，但是我付出了省下的代码的四五倍的代码量来完成这个功能，写成组件化的时候，自我催眠，暗示自己这样写有利于后期维护，但是最后我写的我自己都不得不把注释写的详细一些才能看懂，我是先写的功能半路回去写的登录，因为不写登录无法实现角色划分，避免功能写完后再写登录出问题，后端和我说的是最后写登录所以我就在本地模拟的登录，登录这个功能，复杂在角色校验上，还有登录后的显示相应角色的菜单的实现上，我才用的vuex的store，来完成组件传值的，所以我把角色对应的校验码写在了store中，根据后端返回给我的校验码来确定是哪个角色，当然这里只是一个比较简单的，因为没有后端的数据，全是我模拟的json数据，然后我设了一个路由拦截，根据校验码实现路由拦截，先判断要跳转的页面是否需要登录，如果需要登录，检查校验码是否是初始值，如果是初始值返回登陆页面，登录完根据校验码返回要访问的页面，拦截的方法是router.beforeEach(to,from,next),附上代码：

router.beforeEach((to, from, next) => {
  setTimeout(function(){
    if (to.meta.requireAuth) {  // 判断该路由是否需要登录权限 
      if (sessionStorage.getItem('roles') !== null) {  // 通过session获取当前的roles是否存在
          next();
      }
      else {
          next({
              path: '/',
              query: {redirect: to.fullPath}  // 将跳转的路由path作为参数，登录成功后跳转到该路由
          })
      }
  }else {
      next();
  }
  },500)
  

设置计时器是为了实现异步处理，这里是错误的处理方式，后面我会单独写一篇文章讲一下，我目前用的promise解决异步的方式，以及promise原理及源码解读。还有一个点，保存用户的登录状态是采用sessionStorage,这个缓存方式实在窗口存在期间有效，避免用户刷新还要重新登录的问题接下来附上登陆组件的源码

以上源码是个半成品，仅供找自信以及发现问题，还有看到我说的头头是道，但写出来的代码与理想的差距，希望各位都能做一个勤劳的懒程序员。
谢谢您耐心地看完这篇文章，我主要分享的失败的经历，因为别人的失败对于自己才是最有用的。