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 接着就是跳转到首页