用户登陆与注销

经过上边的章节，我们具备了实现项目的能力，着手制作一个登陆页面，一个后台管理的界面，在界面的右上角显示当前登陆用户的信息，以及用户注销的链接。

我们先来实现用户登陆，跳转到管理后台

<template>
  <div class="main">
    <set-language style="float:right;width:120px;" />
    <form id="login" method="post">
      <h1>{{$t('auth.login_title')}}</h1>
      <fieldset id="inputs">
        <input name="username" v-model="form.username" :placeholder="$t('auth.username')" autofocus required />
        <input name="password" type="password" v-model="form.password" :placeholder="$t('auth.password')" required />
      </fieldset>
      <fieldset id="actions" style="text-align: center">
        <el-button style="width:100%;" type="warning" @click="doLogin"> {{$t('auth.login')}} </el-button>
        <!--
        <a href="/password/reset/">{{$t('auth.password_forgot')}}?</a><a href="/register/">{{$t('auth.register')}}</a>
        -->
      </fieldset>
    </form>
  </div>
</template>

<script>
import SetLanguage from '@/components/setLanguage'
export default {
  components: {
    SetLanguage
  },
  data () {
    return {
      form: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    doLogin: function () {
      console.log(this.form)
      this.$http.post('/login', this.form)
      .then(resp => {
        console.log(resp.data)
        if (resp.data.code === 1) {
          this.$store.commit('setUser', resp.data)
          this.$router.push('/main')
        } else {
          this.$message.error(resp.data.msg)
        }
      }, resp => {
        this.$message.error(resp)
      })
    }
  }
}
</script>

来解读一下登陆的逻辑，向服务端/api/login post 提交用户名和密码，如果返回数据的code为1，则登陆成功，向vuex提交setUser 指令，传递用户信息过去然后跳转到后台首页/main 如果code不为1，则登陆失败，显示失败信息msg 如果通讯错误，显示错误提示this.$message.error(resp)

看看vuex干了啥

  setUser (state, data) {
    console.log(data)
    localStorage.setItem('userinfo', JSON.stringify(data.userinfo))
    localStorage.setItem('token', data.token)
  },

将用户信息和token存储到localStorage里，如果只是保存在state里刷新页面的时候这货就没了，所以我们要存在个靠谱的地方，除了localStorage之外存在cookie里也是一个选择。

在界面显示的部分

<el-dropdown>
¦   <span class="el-dropdown-link">                                                                                     
¦     <img class="avatar" :src="$store.state.userinfo.avatar" alt="">
¦     {{ $store.state.userinfo.username }}
¦     <i class="el-icon-arrow-down el-icon--right"></i>
¦   </span>
¦   <el-dropdown-menu slot="dropdown">
¦     <el-dropdown-item>{{$t('main.profile')}}</el-dropdown-item>
¦     <el-dropdown-item>{{$t('main.password')}}</el-dropdown-item>
¦     <router-link to="/logout">
¦   ¦   <el-dropdown-item divided>{{$t('main.logout')}}</el-dropdown-item>
¦     </router-link>
¦   </el-dropdown-menu>
</el-dropdown>

通过$store.state.userinfo.avatar 读数据

也可以通过computed去读

模拟服务端
通过api代理可以很方便的访问另一个服务提供的接口

我们来实现一个服务端来模拟数据返回

express版

'use strict';

const path = require('path');
const logger = require('morgan');
const express = require('express');
const bodyParser = require('body-parser');

const app = express();
app.use(bodyParser.json());

app.use(logger('dev'));

app.post('/api/login',function(req,res){
  console.log(req.body);
  var user={
  　username:'admin',
　　password:'admin'
  }
  var resp = {
    code: 0,
    msg: "",
    userinfo: {
        username: req.body.username,
        avatar: '/static/avatar.jpg',
        lastip: '222.104.97.110',
        latest: '2017-12-12 12:12:12'
    },
    token: 'iamtoken'
  }
  if(req.body.username==user.username&&req.body.password==user.password){
    resp.token = "woshitoken"
    setTimeout(function() { 
      res.json(resp)
    }, 2000); 
  }else{
    // res.status(401).send('401');
    resp.code = -1
    resp.msg = "用户名密码错误！"
    res.json(resp)
  }
});

app.listen(8000);

或者直接python+django

# -*- coding: utf-8 -*-                                                                                                 
from __future__ import unicode_literals
from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt
from django.shortcuts import render
import time
import json
import random

@csrf_exempt
def login(request):
    data = json.loads(request.body)
    username = data.get('username')
    if not username:
        data = {
            "code": 0,
            "msg": '用户名密码错误',
            "userinfo": {},
            "token": ''
        }
    else:
        data = {
            "code": 1,
            "msg": '',
            "userinfo": {
                'username': username,
                'avatar': 'http://cdn.doublecom.net/Cameo/img/avatar.jpg',
                'lastip': '222.104.97.110',
                'latest': '2017-12-12 12:12:12'
            },
            "token": 'iamtoken'
        }
    return JsonResponse(data)