经过上边的章节，我们具备了实现项目的能力，着手制作一个登陆页面，一个后台管理的界面，在界面的右上角显示当前登陆用户的信息，以及用户注销的链接。
我们先来实现用户登陆，跳转到管理后台
<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)
