Vue學(xué)習(xí)之路之登錄注冊實(shí)例代碼

更新時(shí)間：2017年07月06日 11:03:30 作者：明眸在心丶

本篇文章主要介紹了Vue學(xué)習(xí)之路之登錄注冊實(shí)例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

根據(jù)Vue.js + Element UI + MongoDB進(jìn)行開發(fā)

P1 安裝Vue-CLI

利用Vue.js提供的一個(gè)官方命令行工具

# 全局安裝 vue-cli
$ npm install --global vue-cli
# 創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目
$ vue init webpack my-project
# 安裝依賴，走你
$ cd my-project
$ npm install
$ npm run dev

Vue.js 主要目錄結(jié)構(gòu)

.
├── build      # 一些webpack的文件，配置參數(shù)什么的，一般不用動 
├── config     # vue項(xiàng)目的基本配置文件 
├── index.html   # 主頁
├── node_modules  # 項(xiàng)目中安裝的依賴模塊 
├── package.json  # 項(xiàng)目文件，記載著一些命令和依賴還有簡要的項(xiàng)目描述信息 
├── README.md 
├── server     # 自己創(chuàng)建的后端文件，可以忽視
├── src       # 源碼文件夾，基本上文件都應(yīng)該放在這里
  ├── App.vue   # App.vue組件 
  ├── assets   # 資源文件夾，里面放一些靜態(tài)資源 
  ├── components # 這里放的都是各個(gè)組件文件 
  ├── main.js   # 入口文件 
  └── router   # vue-router 路由配置
├── static     # 生成好的文件會放在這個(gè)目錄下
├── test      # 測試文件夾，測試都寫在這里
├── .babelrc    # babel編譯參數(shù)，vue開發(fā)需要babel編譯 
├── .gitignore
└── .eslintignore

完成后就可以在/src/components/*.vue模板中寫代碼，ctrl+s保存后頁面會自動刷新，若無效請檢查端口是否被占用

P2 安裝Element UI

Element UI文檔

npm i element-ui -S

完成后在main.js中添加如下代碼完整引入Element,就能在/src/components/*.vue模板中使用Element UI的組件

// main.js
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'

Vue.use(ElementUI)

P3 登錄注冊功能

思路

得益于vue的數(shù)據(jù)雙向綁定，讓我們不用操作DOM就能邊輸入邊驗(yàn)證字符串合法性
利用axios實(shí)現(xiàn)前后端的數(shù)據(jù)交互
利用jsonwebtoken實(shí)現(xiàn)登錄驗(yàn)證，結(jié)合vue-router的beforeEnter導(dǎo)航鉤子在跳轉(zhuǎn)前攔截驗(yàn)證access_token的有效性

驗(yàn)證輸入的賬號和密碼是否合法(利用elementui的form表單)

export default {
 name: 'register',
 data () {
  var validateUser = (rule, value, cb) => {
   var pattern = /^[\w\u4e00-\u9fa5]{3,10}$/g
   if (value === '') {
    cb(new Error('請輸入用戶名'))
   } else if (!pattern.test(value)) {
    cb(new Error('請輸入3-10個(gè)字母/漢字/數(shù)字/下劃線'))
   } else {
    cb()
   }
  }
  var validatePwd = (rule, value, cb) => {
   var pattern = /^\S{3,20}$/g
   if (value === '') {
    cb(new Error('請輸入密碼'))
   } else if (!pattern.test(value)) {
    cb(new Error('請輸入3-20個(gè)非空白字符'))
   } else {
    if (this.registerForm.checkPwd !== '') {
     this.$refs.registerForm.validateField('checkPwd')
    }
    cb()
   }
  }
  var validateCheckPwd = (rule, value, cb) => {
   if (value === '') {
    cb(new Error('請?jiān)俅屋斎朊艽a'))
   } else if (value !== this.registerForm.pwd) {
    cb(new Error('兩次輸入密碼不一致!'))
   } else {
    cb()
   }
  }
  return {
   registerForm: {
    userName: '',
    pwd: '',
    checkPwd: ''
   },
   registerRule: {
    userName: [
    { validator: validateUser, trigger: 'blur' }
    ],
    pwd: [
    { validator: validatePwd, trigger: 'blur' }
    ],
    checkPwd: [
    { validator: validateCheckPwd, trigger: 'blur' }
    ]
   }
  }
 },
 methods: {
  submitForm (formName) {
   this.$refs[formName].validate((valid) => {
    if (valid) {
      ...
    } else {
     return false
    }
   })
  }
 }
}

利用axios實(shí)現(xiàn)與后端數(shù)據(jù)的交互

axios文檔

Axios.post('http://localhost:3000/register', data)
.then(res => {
  console.log(res.data)
  if (res.data.code === 0) {
    this.$message({
      showClose: true,
      message: '注冊成功',
      type: 'success'
    })
    router.push({name: 'Login'})
  } else {
    this.$message({
      showClose: true,
      message: '注冊失敗',
      type: 'error'
    })
  }
})

使用 JSON WEB Tokens 實(shí)現(xiàn)登錄驗(yàn)證

由于node后端和vue前端是兩個(gè)不同的端口（:3000和:8090），對于跨域（我已經(jīng)允許跨域訪問），session和cookie就不要想了，并不是設(shè)置一個(gè)什么就能解決的，花了一下午才發(fā)現(xiàn)，所以使用了token來做api請求，而且還能加密。

后端處理登錄

// sever/db/dbHelper.js
exports.findUser = function(data, cb) {
  User.findOne({
    username: data.usr
  }, function(err, doc) {
    // 用戶密碼都正確
    // jwt.encode({加密對象, 持續(xù)時(shí)間}, 密鑰字符串)
    entries.data = user
    entries.code = 0
    var time = moment().add(1, 'days').valueOf()
    entries.access_token = jwt.encode({
      iss: user._id,
      exp: time
    }, jwtTokenSecret)
    cb(true, entries)
  })
}

加密后的entries.access_token:

前端獲取到后端傳遞過來的access_token，將其保存進(jìn)sessionStorage。這個(gè)導(dǎo)航鉤子我放在/p路由獨(dú)享的鉤子下，在進(jìn)入/p/:id前攔截導(dǎo)航，通過axios向后端傳遞access_token，根據(jù)后臺返回值判斷是否已經(jīng)登錄。

導(dǎo)航鉤子傳送門

注意router.beforeEach確保要調(diào)用next方法，否則鉤子就不會被 resolved，但after鉤子沒有 next方法，不能改變導(dǎo)航

beforeEnter: (to, from, next) => {
  let pattern = /^(\/p)/g
  let token = sessionStorage.getItem('accessToken')  //保存token
  if (pattern.test(to.path)) {
    Axios.post('http://localhost:3000/isLogin', {access_token: token})
    .then(res => {
      if (res.data.code === 0) {
        console.log(from)
        console.log(to)
        next()
      } else {
        router.push({name: 'Login'})
        next()
      }
    })
    .catch(err => {
      console.log(err)
    })
  }
}

后端處理token是否合法

后臺獲取到傳遞的token值，利用jwt.decode(token, jwtTokenSecret)對其解碼，解碼結(jié)果就是當(dāng)初我們加密的對象{iss, exp}，首先根據(jù)exp判斷token是否過期，然后根據(jù)_id查詢數(shù)據(jù)庫是否有這個(gè)用戶

// 登錄驗(yàn)證
exports.authority = function (req, cb) {
  // JWT 允許客戶端使用一下3個(gè)方法附加token：
  // 作為請求鏈接（query)的參數(shù)，作為主體的參數(shù)（body），
  // 和作為請求頭（Header）的參數(shù)。
  var token = (req.body && req.body.access_token) || (req.query && req.query.access_token) || req.headers['access-token']
  if (token) {
    try {
      var decoded = jwt.decode(token, jwtTokenSecret)  // 解碼
      if (decoded.exp <= Date.now()) {  // 判斷token是否過期
        entries.code = 99
        cb(false, entries)
      } else {  // 之前加密對象是 user._id
        User.findOne({ _id: decoded.iss }, function(err, user) {
          if (err) {
            console.log(err)
          } else if (user !== null) {
            entries.code = 0
            cb(true, entries)
          }
        })
      }
    } catch (err) {
      console.log(err)
    }
  } else {
    entries.code = 99
    cb(false, entries)
  }
}

源碼

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: