Vue自学写完有点疑惑

linkBG
  • 387

1,首先,代码是可以运行的。完全的前后端分离,分别用两个文件夹存放各自的文件,后端用Laravel。现在的疑虑是:像这种由后端验证传回来的信息,该如何处理,像我下面代码那样处理会不会有点重复了。考虑过在前端这块验证,但是担忧安全性。请问怎么处理比较好。

<script>
  import {loginUrl, getHeaderClient, registerUrl} from './../config'
  import {clientId, clientSecret} from './../env'
  import Notifications from 'vue-notifications'
  export default {
    data () {
      return {
        register: {
          email: '',
          password: '',
          password_confirmation: '',
          name: ''
        }
      }
    },
    methods: {
      handleRegisterFormSubmit () {
        const postData = {
          grant_type: 'client_credentials',
          client_id: clientId,
          client_secret: clientSecret,
          scope: ''
        }
        const postDataRegister = {
          grant_type: 'client_credentials',
          client_id: clientId,
          client_secret: clientSecret,
          email: this.register.email,
          password: this.register.password,
          password_confirmation: this.register.password_confirmation,
          name: this.register.name,
          scope: ''
        }
        const clientAuth = {}
        this.$http.post(loginUrl, postData)
          .then(response => {
            if (response.status === 200) {
              clientAuth.access_token = response.data.access_token
              window.localStorage.setItem('clientAuth', JSON.stringify(clientAuth))
              this.$http.post(registerUrl,
                postDataRegister, {headers: getHeaderClient()})
                .then(response => {
                  if (response.status === 200) {
                    Notifications.success({message: '成功注册'})
                    window.localStorage.removeItem('clientAuth')
                  }
                }, response => { // 这个处理验证错误信息的返回
                  var validatorEmail = ''
                  if (response.body.email) {
                    validatorEmail = response.body.email
                  }
                  var validatorpassword = ''
                  if (response.body.password) {
                    validatorpassword = response.body.password
                  }
                  const validators = validatorEmail + validatorpassword
                  Notifications.warn({message: validators, timeout: 15000})
                })
            }
          }, response => {
            Notifications.error({message: '系统有炸弹,拆弹中…………'})
          })
      }

    }
  }
</script>
<template>
  <div class="container">
   <div class="row">
       <div class="col-md-8 col-md-offset-2">
           <div class="panel panel-default">
               <div class="panel-heading">Register</div>
               <div class="panel-body">
                   <form v-on:submit.prevent="handleRegisterFormSubmit()">
                       <div class="form-group">
                           <label>Name</label>
                           <input
                              class="form-control"
                              placeholder="Enter your name"
                              type="text"
                              v-model="register.name"
                              required
                              >
                       </div>

                       <div class="form-group">
                           <label>E-Mail Address</label>
                           <input
                              class="form-control"
                              placeholder="Enter your email address"
                              type="text"
                              v-model="register.email"
                              required
                              >
                       </div>

                       <div class="form-group ">
                           <label >Password</label>
                               <input
                                  class="form-control"
                                  placeholder="Enter your password"
                                  type="password"
                                  v-model="register.password"
                                  required
                                  >
                       </div>

                       <div class="form-group">
                           <label>Confirm Password</label>
                               <input
                                  class="form-control"
                                  placeholder="Enter your password confirmation"
                                  type="password"
                                  v-model="register.password_confirmation"
                                  required
                                  >
                       </div>

                       <div class="form-group">
                           <div class="col-md-6 col-md-offset-4">
                               <button type="submit" class="btn btn-primary">
                                   Register
                               </button>
                           </div>
                       </div>
                   </form>
               </div>
           </div>
       </div>
   </div>
</div>
</template>

<style lang="sass">
  #login-wrapper
    margin-top: 50px
</style>
回复
阅读 1.5k
3 个回答

代码太多了,有点懒,就没看。

根据楼主的文字信息我跟几点建议吧。

首先,验证永远不会嫌多。
前端验证了,后端也是需要验证的,为了安全性。指不定有调皮的客户就绕过前端验证了,对吧。
多一层验证总是好的。
至于安全性方面,正是因为前端的验证上面得不到安全性的保障,所以才需要后端进行二次验证。
至于代码方面,我没有看,也不好多做评价。如果说是前端为验证所写的代码和后端为验证所写的代码的话,这两部分代码虽然功能重叠,但是并不能叫做代码冗余,因为各自针对点不一样,你可以把后端理解成二次拦截。

大概就是这样了,不知道楼主理解了没。

我一般后端验证完了返回一个大概这样的json

['code'=>0, 'msg'=>'success', 'data'=>Array|Obj];

前端不去验证正确性,只判断合法性
注:合法性检测是前端和后台都需要的,一是用户体验,二是双重保障吧

皮皮虾
  • 2
新手上路,请多包涵

hack太多安全总没错

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏