Vue中登录过程的权限认证

Vue中登录过程的权限认证

通过前端向后端发送请求， 后端返回token， 来进行相关权限的认证

login() {
      // this.$refs.userForm 拿到了整个el-form，然后调用el-form的validate方法
      this.$refs["userForm"].validate(valid => {
        if (valid) {
          // valid如果代表true代表该填写都填写了
          // 正在登录中...
          this.loading = true

          // 发送post请求
          this.$axios
            .post('login', this.userForm)
            .then(res => { //如果想要在回调函数中通过this获取到当前的Vue实例，要用箭头函数
              this.loading = false
              if (res.data.meta.status !== 200) {
                // 登录失败
                this.$message.error(res.data.meta.msg)
              } else {
                this.$message({
                  message: '登录成功',
                  type: 'success'
                })
                
                // 存到本地
                localStorage.setItem('mytoken',res.data.data.token)

                // 编程式导航
                this.$router.push({path:'/layout/users'})
                // this.$router.push({name:'layout'})
              }
            })
        }
      })
    }