vue2.0+koa2+mongodb實(shí)現(xiàn)注冊(cè)登錄

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

//在項(xiàng)目里的mian.js里增加下列代碼
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

//login組件
<template>
 <div class="login">
 <el-tabs v-model="activeName" @tab-click="handleClick">
 <el-tab-pane label="登錄" name="first">
 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
 <el-form-item label="名稱" prop="name">
 <el-input v-model="ruleForm.name"></el-input>
 </el-form-item>
 <el-form-item label="密碼" prop="pass">
 <el-input type="password" v-model="ruleForm.pass" auto-complete="off"></el-input>
 </el-form-item>
 <el-form-item>
 <el-button type="primary" @click="submitForm('ruleForm')">登錄</el-button>
 <el-button @click="resetForm('ruleForm')">重置</el-button>
 </el-form-item>
 </el-form>
 </el-tab-pane>
 <el-tab-pane label="注冊(cè)" name="second">
 <register></register>
 </el-tab-pane>
 </el-tabs>
 </div>
</template>
<script>
import register from '@/components/register'
export default {
 data() {
 var validatePass = (rule, value, callback) => {
 if (value === '') {
 callback(new Error('請(qǐng)輸入密碼'));
 } else {
 if (this.ruleForm.checkPass !== '') {
 this.$refs.ruleForm.validateField('checkPass');
 }
 callback();
 }
 };
 return {
 activeName: 'first',
 ruleForm: {
 name: '',
 pass: '',
 checkPass: '',
 },
 rules: {
 name: [
 { required: true, message: '請(qǐng)輸入您的名稱', trigger: 'blur' },
 { min: 2, max: 5, message: '長(zhǎng)度在 2 到 5 個(gè)字符', trigger: 'blur' }
 ],
 pass: [
 { required: true, validator: validatePass, trigger: 'blur' }
 ]
 },

 };
 },
 methods: {
 //選項(xiàng)卡切換
 handleClick(tab, event) {
 },
 //重置表單
 resetForm(formName) {
 this.$refs[formName].resetFields();
 },
 //提交表單
 submitForm(formName) {
 this.$refs[formName].validate((valid) => {
 if (valid) {
 this.$message({
 type: 'success',
 message: '登錄成功'
 });
 this.$router.push('HelloWorld');
 } else {
 console.log('error submit!!');
 return false;
 }
 });
 },
 },
 components: {
 register
 }
}
</script>
<style rel="stylesheet/scss" lang="scss">
.login {
 width: 400px;
 margin: 0 auto;
}
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
.el-tabs__item {
 text-align: center;
 width: 60px;
}
</style>

//register組件
<template>
 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
 <el-form-item label="名稱" prop="name">
 <el-input v-model="ruleForm.name"></el-input>
 </el-form-item>
 <el-form-item label="密碼" prop="pass">
 <el-input type="password" v-model="ruleForm.pass" auto-complete="off"></el-input>
 </el-form-item>
 <el-form-item label="確認(rèn)密碼" prop="checkPass">
 <el-input type="password" v-model="ruleForm.checkPass" auto-complete="off"></el-input>
 </el-form-item>
 <el-form-item>
 <el-button type="primary" @click="submitForm('ruleForm')">注冊(cè)</el-button>
 <el-button @click="resetForm('ruleForm')">重置</el-button>
 </el-form-item>
 </el-form>
</template>
<script>
export default {
 data() {
 var validatePass = (rule, value, callback) => {
 if (value === '') {
 callback(new Error('請(qǐng)輸入密碼'));
 } else {
 if (this.ruleForm.checkPass !== '') {
 this.$refs.ruleForm.validateField('checkPass');
 }
 callback();
 }
 };
 var validatePass2 = (rule, value, callback) => {
 if (value === '') {
 callback(new Error('請(qǐng)?jiān)俅屋斎朊艽a'));
 } else if (value !== this.ruleForm.pass) {
 callback(new Error('兩次輸入密碼不一致!'));
 } else {
 callback();
 }
 };
 return {
 activeName: 'second',
 ruleForm: {
 name: '',
 pass: '',
 checkPass: '',
 },
 rules: {
 name: [
 { required: true, message: '請(qǐng)輸入您的名稱', trigger: 'blur' },
 { min: 2, max: 5, message: '長(zhǎng)度在 2 到 5 個(gè)字符', trigger: 'blur' }
 ],
 pass: [
 { required: true, validator: validatePass, trigger: 'blur' }
 ],
 checkPass: [
 { required: true, validator: validatePass2, trigger: 'blur' }
 ],
 }
 };
 },
 methods: {
 submitForm(formName) {
 this.$refs[formName].validate((valid) => {
 if (valid) {
 this.$message({
 type: 'success',
 message: '注冊(cè)成功'
 });
 // this.activeName: 'first',
 } else {
 console.log('error submit!!');
 return false;
 }
 });
 },
 resetForm(formName) {
 this.$refs[formName].resetFields();
 }
 }
}
</script>

import Router from 'vue-router'
Vue.use(Router)

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import login from '@/components/login'
import register from '@/components/register'
Vue.use(Router)

const router = new Router({
 mode: 'history',
 routes: [{
 path: '/',
 name: 'home',
 component: HelloWorld,
 meta: {
 requiresAuth: true
 }
 },
 {
 path: '/HelloWorld',
 name: 'HelloWorld',
 component: HelloWorld,
 },
 {
 path: '/login',
 name: 'login',
 component: login,
 },
 {
 path: '/register',
 name: 'register',
 component: register,
 },
 ]
});

//注冊(cè)全局鉤子用來(lái)攔截導(dǎo)航
router.beforeEach((to, from, next) => {
 //獲取store里面的token
 let token = store.state.token;
 //判斷要去的路由有沒(méi)有requiresAuth
 if (to.meta.requiresAuth) {
 if (token) {
 next();
 } else {
 next({
 path: '/login',
 query: { redirect: to.fullPath } // 將剛剛要去的路由path作為參數(shù)，方便登錄成功后直接跳轉(zhuǎn)到該路由
 });
 }
 } else {
 next(); 
 }
});
export default router;

//引入store
import store from './store'

//store index.js
import Vuex from 'vuex'
Vue.use(Vuex)

//store index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
//初始化時(shí)用sessionStore.getItem('token'),這樣子刷新頁(yè)面就無(wú)需重新登錄
const state = {
 token: window.sessionStorage.getItem('token'),
 username: ''
};
const mutations = {
 LOGIN: (state, data) => {
 //更改token的值
 state.token = data;
 window.sessionStorage.setItem('token', data);
 },
 LOGOUT: (state) => {
 //登出的時(shí)候要清除token
 state.token = null;
 window.sessionStorage.removeItem('token');
 },
 USERNAME: (state, data) => {
 //把用戶名存起來(lái)
 state.username = data;
 window.sessionStorage.setItem('username', data);
 }
};
const actions = {
 UserLogin({ commit }, data){
 commit('LOGIN', data);
 },
 UserLogout({ commit }){
 commit('LOGOUT');
 },
 UserName({ commit }, data){
 commit('USERNAME', data);
 }
};
export default new Vuex.Store({
 state,
 mutations,
 actions
});

//axios.js
import axios from 'axios'
import store from './store'
import router from './router'

//創(chuàng)建axios實(shí)例
var instance = axios.create({
 timeout: 5000, //請(qǐng)求超過(guò)5秒即超時(shí)返回錯(cuò)誤
 headers: { 'Content-Type': 'application/json;charset=UTF-8' },
});

//request攔截器
instance.interceptors.request.use(
 config => {
 //判斷是否存在token，如果存在的話，則每個(gè)http header都加上token
 if (store.state.token) {
 config.headers.Authorization = `token ${store.state.token}`;
 }
 return config;
 }
);

//respone攔截器
instance.interceptors.response.use(
 response => {
 return response;
 },
 error => { //默認(rèn)除了2XX之外的都是錯(cuò)誤的，就會(huì)走這里
 if (error.response) {
 switch (error.response.status) {
 case 401:
 router.replace({ //跳轉(zhuǎn)到登錄頁(yè)面
 path: 'login',
 query: { redirect: router.currentRoute.fullPath } // 將跳轉(zhuǎn)的路由path作為參數(shù)，登錄成功后跳轉(zhuǎn)到該路由
 });
 }
 }
 return Promise.reject(error.response);
 }
);

export default {
 //用戶注冊(cè)
 userRegister(data){
 return instance.post('/api/register', data);
 },
 //用戶登錄
 userLogin(data){
 return instance.post('/api/login', data); 
 },
 //獲取用戶
 getUser(){
 return instance.get('/api/user');
 },
 //刪除用戶
 delUser(data){
 return instance.post('/api/delUser', data);
 }
}

$ cnpm i koa
$ cnpm i koa-router -S //koa路由中間件
$ cnpm i koa-bodyparser -S //處理post請(qǐng)求，并把koa2上下文的表單數(shù)據(jù)解析到ctx.request.body中

//server.js
const Koa = require('koa');
const app = new Koa();

//router
const Router = require('koa-router');

//父路由
const router = new Router();

//bodyparser:該中間件用于post請(qǐng)求的數(shù)據(jù)
const bodyParser = require('koa-bodyparser');
app.use(bodyParser());

//引入數(shù)據(jù)庫(kù)操作方法
const UserController = require('./server/controller/user.js');

//checkToken作為中間件存在
const checkToken = require('./server/token/checkToken.js');

//登錄
const loginRouter = new Router();
loginRouter.post('/login', UserController.Login);
//注冊(cè)
const registerRouter = new Router();
registerRouter.post('/register', UserController.Reg);

//獲取所有用戶
const userRouter = new Router();
userRouter.get('/user', checkToken, UserController.GetAllUsers);
//刪除某個(gè)用戶
const delUserRouter = new Router();
delUserRouter.post('/delUser', checkToken, UserController.DelUser);

//裝載上面四個(gè)子路由
router.use('/api',loginRouter.routes(),loginRouter.allowedMethods());
router.use('/api',registerRouter.routes(),registerRouter.allowedMethods());
router.use('/api',userRouter.routes(),userRouter.allowedMethods());
router.use('/api',delUserRouter.routes(),delUserRouter.allowedMethods());

//加載路由中間件
app.use(router.routes()).use(router.allowedMethods());

app.listen(8888, () => {
 console.log('The server is running at http://localhost:' + 8888);
});

proxyTable: {
 '/api': {
 target: 'http://localhost:8888',
 changeOrigin: true
 }
},
jsonwebtoken（JWT）

$ cnpm i jsonwebtoken -S
createToken.js

const jwt = require('jsonwebtoken');
module.exports = function(user_id){
 const token = jwt.sign({user_id: user_id}, 'zhangzhongjie', {expiresIn: '60s'
 });
 return token;
};

const jwt = require('jsonwebtoken');
//檢查token是否過(guò)期
module.exports = async ( ctx, next ) => {
 //拿到token
 const authorization = ctx.get('Authorization');
 if (authorization === '') {
 ctx.throw(401, 'no token detected in http headerAuthorization');
 }
 const token = authorization.split(' ')[1];
 let tokenContent;
 try {
 tokenContent = await jwt.verify(token, 'zhangzhongjie');//如果token過(guò)期或驗(yàn)證失敗，將拋出錯(cuò)誤
 } catch (err) {
 ctx.throw(401, 'invalid token');
 }
 await next();
};

//db.js
const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/vue-login');

let db = mongoose.connection;
// 防止Mongoose: mpromise 錯(cuò)誤
mongoose.Promise = global.Promise;

db.on('error', function(){
 console.log('數(shù)據(jù)庫(kù)連接出錯(cuò)！');
});
db.on('open', function(){
 console.log('數(shù)據(jù)庫(kù)連接成功！');
});

//聲明schema
const userSchema = mongoose.Schema({
 username: String,
 password: String,
 token: String,
 create_time: Date
});
//根據(jù)schema生成model
const User = mongoose.model('User', userSchema)
module.exports = User;

$ cnpm i moment -s //用于生成時(shí)間
$ cnpm i objectid-to-timestamp -s //用于生成時(shí)間
$ cnpm i sha1 -s //安全哈希算法，用于密碼加密
//user.js
const User = require('../db.js').User;
//下面這兩個(gè)包用來(lái)生成時(shí)間
const moment = require('moment');
const objectIdToTimestamp = require('objectid-to-timestamp');
//用于密碼加密
const sha1 = require('sha1');
//createToken
const createToken = require('../token/createToken.js');

//數(shù)據(jù)庫(kù)的操作
//根據(jù)用戶名查找用戶
const findUser = (username) => {
 return new Promise((resolve, reject) => {
 User.findOne({ username }, (err, doc) => {
 if(err){
 reject(err);
 }
 resolve(doc);
 });
 });
};
//找到所有用戶
const findAllUsers = () => {
 return new Promise((resolve, reject) => {
 User.find({}, (err, doc) => {
 if(err){
 reject(err);
 }
 resolve(doc);
 });
 });
};
//刪除某個(gè)用戶
const delUser = function(id){
 return new Promise(( resolve, reject) => {
 User.findOneAndRemove({ _id: id }, err => {
 if(err){
 reject(err);
 }
 console.log('刪除用戶成功');
 resolve();
 });
 });
};
//登錄
const Login = async ( ctx ) => {
 //拿到賬號(hào)和密碼
 let username = ctx.request.body.name;
 let password = sha1(ctx.request.body.pass);//解密
 let doc = await findUser(username); 
 if(!doc){
 console.log('檢查到用戶名不存在');
 ctx.status = 200;
 ctx.body = {
 info: false
 }
 }else if(doc.password === password){
 console.log('密碼一致!');

 //生成一個(gè)新的token,并存到數(shù)據(jù)庫(kù)
 let token = createToken(username);
 console.log(token);
 doc.token = token;
 await new Promise((resolve, reject) => {
 doc.save((err) => {
 if(err){
 reject(err);
 }
 resolve();
 });
 });
 ctx.status = 200;
 ctx.body = { 
 success: true,
 username,
 token, //登錄成功要?jiǎng)?chuàng)建一個(gè)新的token,應(yīng)該存入數(shù)據(jù)庫(kù)
 create_time: doc.create_time
 };
 }else{
 console.log('密碼錯(cuò)誤!');
 ctx.status = 200;
 ctx.body = {
 success: false
 };
 }
};
//注冊(cè)
const Reg = async ( ctx ) => {
 let user = new User({
 username: ctx.request.body.name,
 password: sha1(ctx.request.body.pass), //加密
 token: createToken(this.username), //創(chuàng)建token并存入數(shù)據(jù)庫(kù)
 create_time: moment(objectIdToTimestamp(user._id)).format('YYYY-MM-DD HH:mm:ss'),//將objectid轉(zhuǎn)換為用戶創(chuàng)建時(shí)間
 });
 //將objectid轉(zhuǎn)換為用戶創(chuàng)建時(shí)間(可以不用)
 user.create_time = moment(objectIdToTimestamp(user._id)).format('YYYY-MM-DD HH:mm:ss');

 let doc = await findUser(user.username);
 if(doc){ 
 console.log('用戶名已經(jīng)存在');
 ctx.status = 200;
 ctx.body = {
 success: false
 };
 }else{
 await new Promise((resolve, reject) => {
 user.save((err) => {
 if(err){
 reject(err);
 } 
 resolve();
 });
 });
 console.log('注冊(cè)成功');
 ctx.status = 200;
 ctx.body = {
 success: true
 }
 }
};
//獲得所有用戶信息
const GetAllUsers = async( ctx ) => {
 //查詢所有用戶信息
 let doc = await findAllUsers();
 ctx.status = 200;
 ctx.body = {
 succsess: '成功',
 result: doc
 };
};

//刪除某個(gè)用戶
const DelUser = async( ctx ) => {
 //拿到要?jiǎng)h除的用戶id
 let id = ctx.request.body.id;
 await delUser(id);
 ctx.status = 200;
 ctx.body = {
 success: '刪除成功'
 };
};

module.exports = {
 Login,
 Reg,
 GetAllUsers,
 DelUser
};

//register.vue
if (valid) {
 axios.userRegister(this.ruleForm)
 .then(({}) => {
 if (data.success) {
 this.$message({
 type: 'success',
 message: '注冊(cè)成功'
 });
 } else {
 this.$message({
 type: 'info',
 message: '用戶名已經(jīng)存在'
 });
 }
 })
}

//login.vue
if (valid) {
 axios.userLogin(this.ruleForm)
 .then(({ data }) => {
 //賬號(hào)不存在
 if (data.info === false) {
 this.$message({
 type: 'info',
 message: '賬號(hào)不存在'
 });
 return;
 }
 //賬號(hào)存在
 if (data.success) {
 this.$message({
 type: 'success',
 message: '登錄成功'
 });
 //拿到返回的token和username，并存到store
 let token = data.token;
 let username = data.username;
 this.$store.dispatch('UserLogin', token);
 this.$store.dispatch('UserName', username);
 //跳到目標(biāo)頁(yè)
 this.$router.push('HelloWorld');
 }
 });
}

//Helloworld.vue
<template>
 <div class="hello">
 <ul>
 <li v-for="(item,index) in users" :key="item._id">
 {{ index + 1 }}.{{ item.username }}
 <el-button @click="del_user(index)">刪除</el-button>
 </li>
 </ul>
 <el-button type="primary" @click="logout()">注銷</el-button>
 </div>
</template>

<script>
import axios from '../axios.js'
export default {
 name: 'HelloWorld',
 data () {
 return {
 users:''
 }
 },
 created(){
 axios.getUser().then((response) => {
 if(response.status === 401){
 //不成功跳轉(zhuǎn)回登錄頁(yè)
 this.$router.push('/login');
 //并且清除掉這個(gè)token
 this.$store.dispatch('UserLogout');
 }else{
 //成功了就把data.result里的數(shù)據(jù)放入users，在頁(yè)面展示
 this.users = response.data.result;
 }
 })
 },
 methods:{
 del_user(index, event){
 let thisID = {
 id:this.users[index]._id
 }
 axios.delUser(thisID)
 .then(response => {
 this.$message({
 type: 'success',
 message: '刪除成功'
 });
 //移除節(jié)點(diǎn)
 this.users.splice(index, 1);
 }).catch((err) => {
 console.log(err);
 });
 },
 logout(){
 //清除token
 this.$store.dispatch('UserLogout');
 if (!this.$store.state.token) {
 this.$router.push('/login')
 this.$message({
 type: 'success',
 message: '注銷成功'
 })
 } else {
 this.$message({
 type: 'info',
 message: '注銷失敗'
 })
 }
 },
 }
}
</script>

<style scoped>
h1, h2 {
 font-weight: normal;
}
ul {
 list-style-type: none;
 padding: 0;
}
li {
 display: inline-block;
 margin: 0 10px;
}
a {
 color: #42b983;
}
.hello {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 width: 400px;
 margin: 60px auto 0 auto;
}
</style>