vue2.0 등록 및 로그인 단계에 대한 자세한 설명

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

//在项目里的mian.js里增加下列代码
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

//login组件
<template>
 <p 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(&#39;ruleForm&#39;)">登录</el-button>
      <el-button @click="resetForm(&#39;ruleForm&#39;)">重置</el-button>
     </el-form-item>
    </el-form>
   </el-tab-pane>
   <el-tab-pane label="注册" name="second">
    <register></register>
   </el-tab-pane>
  </el-tabs>
 </p>
</template>
<script>
import register from '@/components/register'
export default {
 data() {
  var validatePass = (rule, value, callback) => {
   if (value === '') {
    callback(new Error('请输入密码'));
   } else {
    if (this.ruleForm.checkPass !== '') {
     this.$refs.ruleForm.validateField('checkPass');
    }
    callback();
   }
  };
  return {
   activeName: 'first',
   ruleForm: {
    name: '',
    pass: '',
    checkPass: '',
   },
   rules: {
    name: [
     { required: true, message: '请输入您的名称', trigger: 'blur' },
     { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
    ],
    pass: [
     { required: true, validator: validatePass, trigger: 'blur' }
    ]
   },
  };
 },
 methods: {
  //选项卡切换
  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-tabsitem {
 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="确认密码" 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(&#39;ruleForm&#39;)">注册</el-button>
   <el-button @click="resetForm(&#39;ruleForm&#39;)">重置</el-button>
  </el-form-item>
 </el-form>
</template>
<script>
export default {
 data() {
  var validatePass = (rule, value, callback) => {
   if (value === '') {
    callback(new Error('请输入密码'));
   } else {
    if (this.ruleForm.checkPass !== '') {
     this.$refs.ruleForm.validateField('checkPass');
    }
    callback();
   }
  };
  var validatePass2 = (rule, value, callback) => {
   if (value === '') {
    callback(new Error('请再次输入密码'));
   } else if (value !== this.ruleForm.pass) {
    callback(new Error('两次输入密码不一致!'));
   } else {
    callback();
   }
  };
  return {
   activeName: 'second',
   ruleForm: {
    name: '',
    pass: '',
    checkPass: '',
   },
   rules: {
    name: [
     { required: true, message: '请输入您的名称', trigger: 'blur' },
     { min: 2, max: 5, message: '长度在 2 到 5 个字符', 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: '注册成功'
     });
     // this.activeName: 'first',
    } else {
     console.log('error submit!!');
     return false;
    }
   });
  },
  resetForm(formName) {
   this.$refs[formName].resetFields();
  }
 }
}
</script>

//axios.js
import axios from 'axios'
import store from './store'
import router from './router'
//创建axios实例
var instance = axios.create({
 timeout: 5000, //请求超过5秒即超时返回错误
 headers: { 'Content-Type': 'application/json;charset=UTF-8' },
});
//request拦截器
instance.interceptors.request.use(
 config => {
  //判断是否存在token，如果存在的话，则每个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 => { //默认除了2XX之外的都是错误的，就会走这里
  if (error.response) {
   switch (error.response.status) {
    case 401:
     router.replace({ //跳转到登录页面
      path: 'login',
      query: { redirect: router.currentRoute.fullPath } // 将跳转的路由path作为参数，登录成功后跳转到该路由
     });
   }
  }
  return Promise.reject(error.response);
 }
);
export default {
  //用户注册
  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请求，并把koa2上下文的表单数据解析到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请求的数据
const bodyParser = require('koa-bodyparser');
app.use(bodyParser());
//引入数据库操作方法
const UserController = require('./server/controller/user.js');
//checkToken作为中间件存在
const checkToken = require('./server/token/checkToken.js');
//登录
const loginRouter = new Router();
loginRouter.post('/login', UserController.Login);
//注册
const registerRouter = new Router();
registerRouter.post('/register', UserController.Reg);
//获取所有用户
const userRouter = new Router();
userRouter.get('/user', checkToken, UserController.GetAllUsers);
//删除某个用户
const delUserRouter = new Router();
delUserRouter.post('/delUser', checkToken, UserController.DelUser);
//装载上面四个子路由
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是否过期
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过期或验证失败，将抛出错误
  } 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 错误
mongoose.Promise = global.Promise;
db.on('error', function(){
  console.log('数据库连接出错！');
});
db.on('open', function(){
  console.log('数据库连接成功！');
});
//声明schema
const userSchema = mongoose.Schema({
  username: String,
  password: String,
  token: String,
  create_time: Date
});
//根据schema生成model
const User = mongoose.model('User', userSchema)
module.exports = User;

$ cnpm i moment -s         //用于生成时间
$ cnpm i objectid-to-timestamp -s //用于生成时间
$ cnpm i sha1 -s          //安全哈希算法，用于密码加密
//user.js
const User = require('../db.js').User;
//下面这两个包用来生成时间
const moment = require('moment');
const objectIdToTimestamp = require('objectid-to-timestamp');
//用于密码加密
const sha1 = require('sha1');
//createToken
const createToken = require('../token/createToken.js');
//数据库的操作
//根据用户名查找用户
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);
    });
  });
};
//删除某个用户
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 ) => {
  //拿到账号和密码
  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('密码一致!');
     //生成一个新的token,并存到数据库
    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, //登录成功要创建一个新的token,应该存入数据库
      create_time: doc.create_time
    };
  }else{
    console.log('密码错误!');
    ctx.status = 200;
    ctx.body = {
      success: false
    };
  }
};
//注册
const Reg = async ( ctx ) => {
  let user = new User({
    username: ctx.request.body.name,
    password: sha1(ctx.request.body.pass), //加密
    token: createToken(this.username), //创建token并存入数据库
    create_time: moment(objectIdToTimestamp(user._id)).format('YYYY-MM-DD HH:mm:ss'),//将objectid转换为用户创建时间
  });
  //将objectid转换为用户创建时间(可以不用)
  user.create_time = moment(objectIdToTimestamp(user._id)).format('YYYY-MM-DD HH:mm:ss');
  let doc = await findUser(user.username);
  if(doc){ 
    console.log('用户名已经存在');
    ctx.status = 200;
    ctx.body = {
      success: false
    };
  }else{
    await new Promise((resolve, reject) => {
      user.save((err) => {
        if(err){
          reject(err);
        }  
        resolve();
      });
    });
    console.log('注册成功');
    ctx.status = 200;
    ctx.body = {
      success: true
    }
  }
};
//获得所有用户信息
const GetAllUsers = async( ctx ) => {
  //查询所有用户信息
  let doc = await findAllUsers();
  ctx.status = 200;
  ctx.body = {
    succsess: '成功',
    result: doc
  };
};
//删除某个用户
const DelUser = async( ctx ) => {
  //拿到要删除的用户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: '注册成功'
    });
   } else {
    this.$message({
     type: 'info',
     message: '用户名已经存在'
    });
   }
  })
}

//login.vue
if (valid) {
 axios.userLogin(this.ruleForm)
  .then(({ data }) => {
   //账号不存在
   if (data.info === false) {
    this.$message({
     type: 'info',
     message: '账号不存在'
    });
    return;
   }
   //账号存在
   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);
    //跳到目标页
    this.$router.push('HelloWorld');
   }
  });
}

//Helloworld.vue
<template>
 <p 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>
 </p>
</template>
<script>
import axios from '../axios.js'
export default {
 name: 'HelloWorld',
 data () {
  return {
   users:''
  }
 },
 created(){
  axios.getUser().then((response) => {
   if(response.status === 401){
    //不成功跳转回登录页
    this.$router.push('/login');
    //并且清除掉这个token
    this.$store.dispatch('UserLogout');
   }else{
    //成功了就把data.result里的数据放入users，在页面展示
    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: '删除成功'
     });
     //移除节点
     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>