vue中的登录注册功能

点击登录按钮进行以下步骤：

1.表单预验证

根据输入的用户名和密码进行表单预验证

 表单预验证通过后

2.路由守卫

login() {
      // 表单预验证
      this.$refs.loginFormRef.validate(async (valid) => {
        //如果预验证不通过则什么也不执行
        if (!valid) return;
        //反之 则请求后台登录接口 将输入的用户名和密码与数据库中已注册用户名和密码进行对比
        //验证成功 即可放行！
        const { data: res } = await this.$http.post("login", this.formList);
        if (res.meta.status != 200) return this.$message.error("登陆失败");
        this.$message.success("登陆成功");
        // 将登陆成功的token保存至sessionStorage中
        window.sessionStorage.setItem("token", res.data.token);
        // 编程式导航 跳转至后台主页/home页面
        this.$router.push("/home");
        // 路由守卫 只有登陆成功返回token才可以跳转 通过修改url不能跳转
        router.beforeEach((to, from, next) => {
          // 如果访问的是登录页直接放行
          if (to.path === "/login") return next();
          //反之则从sessionstorage中获取保存的token值 进行判断
          const tokenStr = window.sessionStorage.getItem("token");
          // 没有token 强制让其返回到登录页
          if (!tokenStr) return next("/login");
          // 有token 直接放行到用户任意想去的地方
          next();
        });
      });
    },