溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
根據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 登錄注冊功能
思路
驗證輸入的賬號和密碼是否合法(利用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:
前端獲取到后端傳遞過來的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)
}
}
源碼
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
