Vue学习之路之登录注册实例代码


Posted in Javascript onJuly 06, 2017

根据Vue.js + Element UI + MongoDB进行开发

P1 安装Vue-CLI

Vue.js文档

利用Vue.js提供的一个官方命令行工具

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖,走你
$ cd my-project
$ npm install
$ npm run dev

Vue.js 主要目录结构

.
├── build      # 一些webpack的文件,配置参数什么的,一般不用动 
├── config     # vue项目的基本配置文件 
├── index.html   # 主页
├── node_modules  # 项目中安装的依赖模块 
├── package.json  # 项目文件,记载着一些命令和依赖还有简要的项目描述信息 
├── README.md 
├── server     # 自己创建的后端文件,可以忽视
├── src       # 源码文件夹,基本上文件都应该放在这里
  ├── App.vue   # App.vue组件 
  ├── assets   # 资源文件夹,里面放一些静态资源 
  ├── components # 这里放的都是各个组件文件 
  ├── main.js   # 入口文件 
  └── router   # vue-router 路由配置
├── static     # 生成好的文件会放在这个目录下
├── test      # 测试文件夹,测试都写在这里
├── .babelrc    # babel编译参数,vue开发需要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学习之路之登录注册实例代码

思路

  1. 得益于vue的数据双向绑定,让我们不用操作DOM就能边输入边验证字符串合法性
  2. 利用axios实现前后端的数据交互
  3. 利用jsonwebtoken实现登录验证,结合vue-router的beforeEnter导航钩子在跳转前拦截验证access_token的有效性

验证输入的账号和密码是否合法(利用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个字母/汉字/数字/下划线'))
   } 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个非空白字符'))
   } else {
    if (this.registerForm.checkPwd !== '') {
     this.$refs.registerForm.validateField('checkPwd')
    }
    cb()
   }
  }
  var validateCheckPwd = (rule, value, cb) => {
   if (value === '') {
    cb(new Error('请再次输入密码'))
   } 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实现与后端数据的交互

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 实现登录验证

由于node后端和vue前端是两个不同的端口(:3000和:8090),对于跨域(我已经允许跨域访问),session和cookie就不要想了,并不是设置一个什么就能解决的,花了一下午才发现,所以使用了token来做api请求,而且还能加密。

后端处理登录

// sever/db/dbHelper.js
exports.findUser = function(data, cb) {
  User.findOne({
    username: data.usr
  }, function(err, doc) {
    // 用户密码都正确
    // jwt.encode({加密对象, 持续时间}, 密钥字符串)
    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:

Vue学习之路之登录注册实例代码

前端获取到后端传递过来的access_token,将其保存进sessionStorage。这个导航钩子我放在/p路由独享的钩子下,在进入/p/:id前拦截导航,通过axios向后端传递access_token,根据后台返回值判断是否已经登录。

导航钩子传送门

注意router.beforeEach确保要调用next方法,否则钩子就不会被 resolved,但after钩子没有 next方法,不能改变导航

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)对其解码,解码结果就是当初我们加密的对象{iss, exp},首先根据exp判断token是否过期,然后根据_id查询数据库是否有这个用户

// 登录验证
exports.authority = function (req, cb) {
  // JWT 允许客户端使用一下3个方法附加token:
  // 作为请求链接(query)的参数,作为主体的参数(body),
  // 和作为请求头(Header)的参数。
  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)
  }
}

源码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
为jQuery.Treeview添加右键菜单的实现代码
Oct 22 Javascript
JQuery live函数
Dec 24 Javascript
js对象数组按属性快速排序
Jan 31 Javascript
js判断样式className同时增加class或删除class
Jan 30 Javascript
Javascript封装DOMContentLoaded事件实例
Jun 12 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
Mar 01 Javascript
ECMAScript5(ES5)中bind方法使用小结
May 07 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
Jan 04 Javascript
利用Javascript实现简单的转盘抽奖
Feb 13 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
Feb 13 Javascript
js实现多张图片每隔一秒切换一张图片
Jul 29 Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
Oct 15 Javascript
AngularJS中ng-class用法实例分析
Jul 06 #Javascript
jQuery 实现图片的依次加载图片功能
Jul 06 #jQuery
JS图片轮播与索引变色功能实例详解
Jul 06 #Javascript
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 #jQuery
vue2.0 keep-alive最佳实践
Jul 06 #Javascript
angular框架实现全选与单选chekbox的自定义
Jul 06 #Javascript
详解Angular Reactive Form 表单验证
Jul 06 #Javascript
You might like
PHP 变量类型的强制转换
2009/10/23 PHP
使用PHP遍历文件夹与子目录的函数代码
2011/09/26 PHP
PHP跨时区(UTC时间)应用解决方案
2013/01/11 PHP
PHP中大括号'{}'用法实例总结
2017/02/08 PHP
php实现微信和支付宝支付的示例代码
2020/08/11 PHP
学习ExtJS fit布局使用说明
2009/10/08 Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
2011/08/28 Javascript
从jQuery.camelCase()学习string.replace() 函数学习
2011/09/13 Javascript
JS 如果改变span标签的是否隐藏属性
2011/10/06 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
2015/05/03 Javascript
js实现登陆遮罩效果的方法
2015/07/28 Javascript
js判断当前页面用什么浏览器打开的方法
2016/01/06 Javascript
javascript中对Date类型的常用操作小结
2016/05/19 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
2017/01/18 Javascript
如何获取元素的最终background-color
2017/02/06 Javascript
关于vue-router路径计算问题
2017/05/10 Javascript
详解JS数值Number类型
2018/02/07 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
2019/06/04 Javascript
解决vue 给window添加和移除resize事件遇到的坑
2020/07/21 Javascript
[02:44]DOTA2英雄基础教程 克林克兹
2014/01/15 DOTA
Python中函数参数设置及使用的学习笔记
2016/05/03 Python
python中reader的next用法
2018/07/24 Python
Python Web框架之Django框架Form组件用法详解
2019/08/16 Python
python实现用类读取文件数据并计算矩形面积
2020/01/18 Python
Python 格式化打印json数据方法(展开状态)
2020/02/27 Python
浅谈在django中使用redirect重定向数据传输的问题
2020/03/13 Python
美国畅销的跑步机品牌:ProForm
2017/02/06 全球购物
香港彩色隐形眼镜在线商店:Stunninglens(全球免费送货)
2019/05/10 全球购物
说一下mysql, oracle等常见数据库的分页实现方案
2012/09/29 面试题
什么是动态端口(Dynamic Ports)?动态端口的范围是多少?
2014/12/12 面试题
给女儿的表扬信
2014/01/18 职场文书
教师素质教育心得体会
2016/01/19 职场文书
2019财务管理制度最新范本!
2019/07/09 职场文书
Python 如何利用ffmpeg 处理视频素材
2021/11/27 Python
利用Python实时获取steam特惠游戏数据
2022/06/25 Python
微软Win11 全新照片应用面向 Dev预览版推出 新版本上手体验图集
2022/09/23 数码科技