前端---重置密码功能及前端校验功能

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/oncemore520/article/details/87606799

今天先整理去年cms做的一个重置密码的功能，也是刚刚进入这个公司做的

先添加一个用户，这个用户的邮箱是必填的，添加完后列表里就会显示这个用户，
在验证邮箱必填，且符合格式的时候，是这样做的：

    <el-dialog title="添加用户" :visible.sync="dialogAddUserFormVisible" custom-class="el-dialog-md">
      <el-form :model="addUserForm" :rules="rules" ref="addUserForm">
        <el-form-item label="登录名" :label-width="dialogFormLabelWidth" prop="username">
          <el-input v-model="addUserForm.username" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="中文名" :label-width="dialogFormLabelWidth" prop="nickname">
          <el-input v-model="addUserForm.nickname" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" :label-width="dialogFormLabelWidth" prop="mobile">
          <el-input v-model="addUserForm.mobile" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="dialogFormLabelWidth" prop="email">
          <el-input v-model="addUserForm.email" auto-complete="off"></el-input>
        </el-form-item>
            <el-form-item label="说明" :label-width="dialogFormLabelWidth">
          <el-input v-model="addUserForm.desc" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddUserFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="AddUserSubmit('addUserForm')" :loading="btnLoading">确 定</el-button>
      </div>
    </el-dialog>

1.rules是规则，需要定义

  rules: {
        mobile: [
          {
            validator: checkMobil,
            required:true,
            trigger: "blur"
          }
        ],
        email: [
          {
            required: true,
            message: "请输入邮箱地址",
            trigger: "change"
          }
        ],
        nickname:[{required:true, trigger: "blur"}],
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "change"
          }
        ]
      },

2.prop属性对应规则中的属性
3.引入校验邮箱，手机号的正则表达式方法

记住这里千万不能有return方法，否则校验是不管用的。（）
4.最后就是点击确定的时候

  AddUserSubmit(formName) {
      this.btnLoading = true;
      this.$refs[formName].validate(valid => {
        if (valid) {
          addUser(this.addUserForm).then(response => {
            if (response.code == 0) {
              this.btnLoading = false;
              this.dialogAddUserFormVisible = false;
              message({
                message: "添加用户成功，请查看您的邮箱进行设置密码",
                type: "success"
              });
              this.fetchData();
            } else {
              this.btnLoading = false;
            }
          });
        } else {
          this.btnLoading = false;
          let options = { message: "检查格式", type: "fail" };
          message(options);
          return false;
        }
      });
    },

用户添加完成后， 列表上会显示，操作中会有重置密码功能。

默认密码是123456，这个后台会做校验
然后在前端界面上可以做重置密码的功能

 changePassword(id) {
      this.containerLoading = true;
      sendEmail({
        id: id
      }).then(response => {
        if (response.code == 0) {
          this.containerLoading = false;
          let options = {
            message: "密码已发送到您的邮箱，请注意查收！",
            type: "success"
          };
          message(options);
        }
      });
    },

然后我登录我的163邮箱，就会给我发送这样一个邮件
http://cms2.test.jisucloud.cn/[email protected]&salt=41331992&ts=1550459383&sign=b1c75a8a4d33c2648583428e49088228
这个网址呢，就是我前端的修改密码的页面，这个页面是一个单独的页面，不依赖于登录态的
所以我需要设置白名单

const whiteList = ['/login','/password','/report/surveyReportNew','/report/moxieReport','/lookDetail']// no redirect whitelist

router.beforeEach((to, from, next) => {
  NProgress.start() // start progress bar
  if (getToken()) { // determine if there has token
    /* has token*/
    if (to.path === '/login') {
      next({ path: '/' })
      NProgress.done()
    } else {
      if (store.getters.name.length === 0) { // 判断当前用户是否已拉取完user_info信息
        store.dispatch('GetUserInfo').then(res => { // 拉取user_info          
          /** 
           * note: roles must be a array! such as: 
           * [
           *  {
           *    name:'pageview',
           *    services:['/user/info','/user/list'],
           *    children:[
           *      {
           *        name:'pageview',
           *        services:['/user/info','/user/list'],
           *      }
           *    ]
           *  }
           * ]
           * */
          const roles = res.data.roles
          const isAdmin = res.data.isAdmin
          store.dispatch('GenerateRoutes', { isAdmin, roles }).then(() => { // 根据roles权限生成可访问的路由表
            router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
            next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
          })
        }).catch(() => {
          store.dispatch('FedLogOut').then(() => {
            Message.error('Verification failed, please login again')
            next({ path: '/login' })
          })
        })
      } else {
        next()
      }
    }
  } else {
    /* has no token*/
    if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入
      next()
    } else {
      next('/login') // 否则全部重定向到登录页
      NProgress.done() // if current page is login will not trigger afterEach hook, so manually handle it
    }
  }
})

点击确定

这样就完成了，添加用户到修改密码的功能了。是不是很简单。