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 相关文章推荐
Javascript 实用小技巧
Apr 07 Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
Feb 16 Javascript
jQuery qrcode生成二维码的方法
Apr 03 Javascript
javascript事件冒泡简单示例
Jun 20 Javascript
微信小程序 教程之模块化
Oct 17 Javascript
5种JavaScript脚本加载的方式
Jan 16 Javascript
详解Angular中的自定义服务Service、Provider以及Factory
Apr 22 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
Aug 30 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
Oct 20 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
Mar 10 Javascript
koa2 数据api中间件设计模型的实现方法
Jul 13 Javascript
vue实力踩坑之push当前页无效
Apr 10 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
php中rename函数用法分析
2014/11/15 PHP
php的PDO事务处理机制实例分析
2017/02/16 PHP
ajax调用返回php接口返回json数据的方法(必看篇)
2017/05/05 PHP
php实现的证件照换底色功能示例【人像抠图/换背景图】
2020/05/29 PHP
Laravel登录失败次数限制的实现方法
2020/08/26 PHP
用ASP将SQL搜索出来的内容导出为TXT的代码
2007/07/27 Javascript
Javascript 运动中Offset的bug解决方案
2014/12/24 Javascript
JS的数组迭代方法
2015/02/05 Javascript
JS选项卡动态替换banner图片路径的方法
2015/05/11 Javascript
一个超简单的jQuery回调函数例子(分享)
2016/08/08 Javascript
js时间比较 js计算时间差的简单实现方法
2016/08/26 Javascript
js微信应用场景之微信音乐相册案例分享
2017/08/11 Javascript
微信小程序之页面跳转和参数传递的实现
2017/09/29 Javascript
JavaScript使用闭包模仿块级作用域操作示例
2019/01/21 Javascript
使用Python脚本将绝对url替换为相对url的教程
2015/04/24 Python
Python中shutil模块的学习笔记教程
2017/04/04 Python
利用Python实现Windows下的鼠标键盘模拟的实例代码
2017/07/13 Python
教你使用python实现微信每天给女朋友说晚安
2018/03/23 Python
详解mac python+selenium+Chrome 简单案例
2019/11/08 Python
Python多线程threading join和守护线程setDeamon原理详解
2020/03/18 Python
什么是Python包的循环导入
2020/09/08 Python
python 发送邮件的四种方法汇总
2020/12/02 Python
jupyter notebook远程访问不了的问题解决方法
2021/01/11 Python
什么是规则表达式
2012/05/03 面试题
法学专业毕业生自荐信范文
2013/12/18 职场文书
化学教学随笔感言
2014/02/19 职场文书
二手房购房意向书范本
2014/04/01 职场文书
《望庐山瀑布》教学反思
2014/04/22 职场文书
管理建议书范文
2014/05/13 职场文书
教师师德考核自我评价
2014/09/13 职场文书
英语感谢信范文
2015/01/20 职场文书
设备技术员岗位职责
2015/04/11 职场文书
学校学习型党组织建设心得体会
2019/06/21 职场文书
pytorch 一行代码查看网络参数总量的实现
2021/05/12 Python
Python 数据结构之十大经典排序算法一文通关
2021/10/16 Python
Python GUI编程之tkinter 关于 ttkbootstrap 的使用详解
2022/03/03 Python