亲宝软件园·资讯

展开

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

明眸在心丶 人气:0

根据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 登录注册功能


思路

  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请求,而且还能加密。

后端处理登录

// severhttps://img.qb5200.com/download-x/dbhttps://img.qb5200.com/download-x/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:


前端获取到后端传递过来的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)
  }
}

源码

加载全部内容

相关教程
猜你喜欢
用户评论