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 相关文章推荐
js 数组实现一个类似ruby的迭代器
Oct 27 Javascript
JQUBAR1.1 jQuery 柱状图插件发布
Nov 28 Javascript
jquery中animate动画积累的解决方法
Oct 05 Javascript
javascript实现倒计时N秒后网页自动跳转代码
Dec 11 Javascript
超级简单实现JavaScript MVC 样式框架
Mar 24 Javascript
javascript中基本类型和引用类型的区别分析
May 12 Javascript
javascript 闭包详解
Jul 02 Javascript
Bootstrap每天必学之标签与徽章
Nov 27 Javascript
JavaScript图片处理与合成总结
Mar 04 Javascript
VueJS 取得 URL 参数值的方法
Jul 19 Javascript
vue npm install 安装某个指定的版本操作
Aug 11 Javascript
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
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
Ajax+PHP 边学边练 之二 实例
2009/11/24 PHP
利用curl 多线程 模拟 并发的详解
2013/06/14 PHP
Mac OS下配置PHP+MySql环境
2015/02/25 PHP
PHP Mysqli 常用代码集合
2016/11/12 PHP
tp5.0框架隐藏index.php入口文件及模块和控制器的方法分析
2020/02/11 PHP
document.open() 与 document.write()的区别
2007/08/13 Javascript
jquery easyui的tabs使用时的问题
2010/03/23 Javascript
Javascript实现的鼠标经过时播放声音
2010/05/18 Javascript
浅析javascript闭包 实例分析
2010/12/25 Javascript
jquery获取元素索引值index()示例
2014/02/13 Javascript
node.js中的fs.readSync方法使用说明
2014/12/17 Javascript
JavaScript中的null和undefined区别介绍
2015/01/01 Javascript
jQuery Validate表单验证深入学习
2015/12/18 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
2016/01/14 Javascript
Js遍历键值对形式对象或Map形式的方法
2016/08/08 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
2017/05/24 jQuery
Angular6 正则表达式允许输入部分中文字符
2018/09/10 Javascript
vue自定义指令的创建和使用方法实例分析
2018/12/04 Javascript
JavaScript类型相关的常用操作总结
2019/02/14 Javascript
es6数据变更同步到视图层的方法
2019/03/04 Javascript
使用JS判断页面是首次被加载还是刷新
2019/05/26 Javascript
微信小程序实现分页加载效果
2020/11/19 Javascript
《Python之禅》中对于Python编程过程中的一些建议
2015/04/03 Python
python实现统计代码行数的方法
2015/05/22 Python
Python中for循环和while循环的基本使用方法
2015/08/21 Python
Python3.X 线程中信号量的使用方法示例
2017/07/24 Python
Python OpenCV读取中文路径图像的方法
2020/07/02 Python
Python3合并两个有序数组代码实例
2020/08/11 Python
探究 canvas 绘图中撤销(undo)功能的实现方式详解
2018/05/17 HTML / CSS
《彩色世界》教学反思
2014/04/12 职场文书
现役军人家属慰问信
2015/03/24 职场文书
2015年高中班主任工作总结
2015/04/30 职场文书
广播稿:校园广播稿范文
2019/04/17 职场文书
MySQL快速插入一亿测试数据
2021/06/23 MySQL
python 标准库原理与用法详解之os.path篇
2021/10/24 Python
python获取带有返回值的多线程
2022/05/02 Python