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优缺点分析说明
Apr 10 Javascript
JS基于Mootools实现的个性菜单效果代码
Oct 21 Javascript
Spring mvc 接收json对象
Dec 10 Javascript
JavaScript function函数种类详解
Feb 22 Javascript
Javascript技术栈中的四种依赖注入小结
Feb 27 Javascript
Javascript计算二维数组重复值示例代码
Dec 18 Javascript
详解VueJS 数据驱动和依赖追踪分析
Jul 26 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
Sep 15 Javascript
JavaScript数据结构之优先队列与循环队列实例详解
Oct 27 Javascript
vue-cli 首屏加载优化问题
Nov 06 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
Dec 29 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中JSON的使用与转换
2015/01/14 PHP
PHP调用.NET的WebService 简单实例
2015/03/27 PHP
PHP浮点数精度问题汇总
2015/05/13 PHP
关于PHP定时发送服务的解决办法
2017/04/23 PHP
php 7新特性之类型申明详解
2017/06/06 PHP
数据结构之利用PHP实现二分搜索树
2020/10/25 PHP
JavaScript 利用StringBuffer类提升+=拼接字符串效率
2009/11/24 Javascript
jQuery 处理网页内容的实现代码
2010/02/15 Javascript
jQuery查询数据返回object和字符串影响原因是什么
2013/08/09 Javascript
原生js事件的添加和删除的封装
2014/07/01 Javascript
jQuery插件制作之全局函数用法实例
2015/06/01 Javascript
jQuery实现下拉菜单的实例代码
2017/06/19 jQuery
vue2.0实现分页组件的实例代码
2017/06/22 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
2017/08/23 Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
2018/01/16 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
2018/03/03 Javascript
Vue头像处理方案小结
2018/07/26 Javascript
详解如何使用nvm管理Node.js多版本
2019/05/06 Javascript
一篇文章带你浅入webpack的DLL优化打包
2020/02/20 Javascript
使用IPython下的Net-SNMP来管理类UNIX系统的教程
2015/04/15 Python
python避免死锁方法实例分析
2015/06/04 Python
python tensorflow学习之识别单张图片的实现的示例
2018/02/09 Python
Django文件存储 默认存储系统解析
2019/08/02 Python
使用Python函数进行模块化的实现
2019/11/15 Python
python实现飞行棋游戏
2020/02/05 Python
pyMySQL SQL语句传参问题,单个参数或多个参数说明
2020/06/06 Python
详解快速开发基于 HTML5 网络拓扑图应用
2018/01/08 HTML / CSS
Peter Alexander新西兰站:澳大利亚领先的睡衣设计师品牌
2016/12/10 全球购物
Made in Design英国:设计家具、照明、家庭装饰和花园家具
2019/09/24 全球购物
饮料业务员岗位职责
2013/12/15 职场文书
毕业生自荐书模版
2014/01/04 职场文书
情人节活动策划方案
2014/02/27 职场文书
少儿节目主持串词
2014/04/02 职场文书
ktv筹备计划书
2014/05/03 职场文书
学校联谊协议书
2014/09/16 职场文书
2019新员工试用期转正工作总结范文
2019/08/21 职场文书