indiactor 项目解析

views文件夹下面有 login index error pages 

　　导入顺序为login => index => pages => pages里面包含有左侧菜单栏里面的页面

1 login解析

　　beforecreate 里面先清楚token ，defalutpath

　　1.1   beforeCreate() {

    　　// 清除token

   　　 this.$store.distach("setToken","")

    　　// 清除默认首页

    　　this.$store.dispatch("setDefaultPath", "");

  　      },

　　1.2   在mounted里面

　　　　1 刷新验证码；即使不是第一次登录 也需要输入验证码；

　　　　2  获取用户储存的用户信息  formDate里面的数据采用了双向绑定；可以直接渲染到模板当中显示； 当用户不是第一次登录时；用户打开页面可直接点击登录即可；

 　　　　mounted() {

    　　　　// 刷新验证码

   　　 　　this.refeshVerify();

    　　　　// 从本地存储中获取用户信息

   　　 　　const remember = localStorage.getItem("remember");

    　　　　const userName = localStorage.getItem("userName");

    　　　　const password = localStorage.getItem("password");

    　　　　this.formData.remember = remember === "true";

    　　　　if (userName) {

      　　　　this.formData.userName = userName;

   　　 　　 }

   　　　　 if (password) {

      　　　　this.formData.password = password;

   　　  　　}

  　　 　},

　　1.3  在watch中监听用户的 remember（记住密码） 是否发生变化  并记录下来保存到 localStorage中； 

　　1.4  在登录按钮触发  表单验证函数  ；确认表单验证合格后；触发login（） 函数

　　1.5 在触发login()函数中 ： 

　　　　1.5.1  调用API接口 APUser.login()  使用post方法提交用户填写的表单数据(this.formData中包含有要提交的参数；取出来用即可) ；

　　　　1.5.2  返回的数据中包含有token值；可以调用store 中的方法   this.$store.distach("setToken",res.data.token) ;   sessionStorage.setItem("token_valid", true);

　　　　1.5.3  再根据this.formData中的remember来判断是否本地存储 用户的用户名和密码  ；

　　　　　　　　remember(remember,userName,password){

　　　　　　　　　　if(remember){

　　　　　　　　　　　　localStoage.setItem("userName",userName);

　　　　　　　　　　　　localStoage.setItem("password",password);

　　　　　　　　　　　　return;
　　　　　　　　　　}

　　　　　　　　　　localStorage.removeItem("userName")

　　　　　　　　　　localStorage.removeItem("password")

　　　　　　　　}

　　

　　　　1.5.4  接着就是跳转到首页