Vue学习之路之登录注册实例代码
|
根据Vue.js + Element UI + MongoDB进行开发 P1 安装Vue-CLIVue.js文档 利用Vue.js提供的一个官方命令行工具 Vue.js 主要目录结构完成后就可以在/src/components/*.vue模板中写代码，ctrl+s保存后页面会自动刷新，若无效请检查端口是否被占用 P2 安装Element UIElement UI文档 完成后在main.js中添加如下代码完整引入Element,就能在/src/components/*.vue模板中使用Element UI的组件 Vue.use(ElementUI)
P3 登录注册功能
思路
验证输入的账号和密码是否合法(利用elementui的form表单) {
var pattern = /^[wu4e00-u9fa5]{3,10}$/g
if (value === '') {
cb(new Error('请输入用户名'))
} else if (!pattern.test(value)) {
cb(new Error('请输入3-10个字母/汉字/数字/下划线'))
} else {
cb()
}
}
var validatePwd = (rule,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,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,checkPwd: [
{ validator: validateCheckPwd,trigger: 'blur' }
]
}
}
},methods: {
submitForm (formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
...
} else {
return false
}
})
}
}
}
利用axios实现与后端数据的交互axios文档 {
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请求，而且还能加密。 后端处理登录加密后的entries.access_token:
前端获取到后端传递过来的access_token，将其保存进sessionStorage。这个导航钩子我放在/p路由独享的钩子下，在进入/p/:id前拦截导航，通过axios向后端传递access_token，根据后台返回值判断是否已经登录。 导航钩子传送门 注意router.beforeEach确保要调用next方法，否则钩子就不会被 resolved，但after钩子没有 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查询数据库是否有这个用户 源码 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
