koa2+vue实现简单的登陆
安装element-ui
npm i element-ui -S
在src/main.js中引入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
登陆
安装axios用于前后台的数据传输 npm install --save axios
在main.js中配置全局的axios
在src下新建一个axios文件夹，配置拦截器 和 全局地址 token
import axios from 'axios' // axios引用
import qs from 'qs'
// axios.defaults.baseURL = 'http://localhost:3000'; // 全局的地址，因为我的koa监听端口是3000， 这里可以按照大家自己的来配置
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; //这是配置token
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
if(config.method === 'post'){
config.data = qs.stringify(config.data)
}
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
export default axios;
在src下新建一个api文件夹，存放访问后台的地址
import axios from 'axios';
export default{
denglu: (data) => {
return axios.post('/login', data)
}
}
搭建koa2前端先告一段落，我们来配置后台接口
学习koa
安装koa2 koa-bodyparser koa-router koa2-corsnpm install --save koa koa-bodyparser koa-router koa2-cors
koa-bodyparser：用于接收并解析前台发送过来的post数据
koa-router：路由
koa2-cors：用来解决前端的跨域
搭建koa 在浏览器运行localhost:3000 页面输出 hello 表示成功了
下面的代码是验证koa是否搭建成功，可以跳过
const Koa = require('koa');
const bodyparser = require('koa-bodyparser');
const app = new Koa();
app.use(async (ctx) => {
ctx.body = 'hello';
})
app.listen(3000);
接下来 开始搭建koa的路由
const Koa = require('koa');
const bodyparser = require('koa-bodyparser');
const router = require('koa-router')();
const login = require('./router/login.js'); //这是登陆路由的文件
const cors = require('koa2-cors');
const app = new Koa();
app.use(bodyparser())
这是处理前端跨域的配置
app.use(cors({
origin: function (ctx) {
if (ctx.url === '/login') {
return "*"; // 允许来自所有域名请求
}
return 'http://localhost:8080';
},
exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'],
maxAge: 5,
credentials: true,
allowMethods: ['GET', 'POST', 'DELETE'],
allowHeaders: ['Content-Type', 'Authorization', 'Accept'],
}));
router.use('/login',login); //将路由提取出去便于管理
app
.use(router.routes())
.use(router.allowedMethods());
app.listen(3000);
接下来就是去配置登陆的路由
const router = require('koa-router')();
router
.post('/', async ctx => {
ctx.body = { //这是向前台返回的数据 因为没有连接数据库所以我们自己定义，后面讲连接数据库
user:'111',
code:1,
status:200
};
});
module.exports = router.routes();
接下来 进入src/axios下的文件打开 将注释的代码放开
axios.defaults.baseURL = 'http://localhost:3000'; // 全局的地址，因为我的koa监听端口是3000， 这里可以按照大家自己的来配置
ok 我们开测试一下
可以用postmain 也可以直接在浏览器中测试
postmain
chrome浏览器 直接在浏览器中测试
能取到数据 那就说明没有问题 接下来开始连接数据库 数据库用的是 mysql
创建数据库我在本地用的是mamp+navicat 大家可以用自己熟悉的
安装mysql-pro 一个连接数据库的中间件npm install mysql-pro
接下来在创建表
需要的字段
| id | user | pass |
|---|
随便添加两个就可以了，这里没有做验证，需要的小伙伴可以自己添加这个功能
到此就结束了，我们来验证一下
在koa2/sql下新建一个js文件
const Client = require('mysql-pro');
const db = new Client({
mysql:{
host:'localhost',
port:3306,
database:'vue-koa2',
user:'root',
password:'root'
}
})
module.exports = db;
接下来进入koa2/router下的login.js
看一下我们在前端拿到的数据
因为我们用了中间件koa-bodyparser ,在koa2/router/login.js中这样写
```
const router = require('koa-router')();
const db = require('../sql/sql');
router
.post('/', async ctx => {
let user = ctx.request.body //接收前端传过来的post数据
console.log(user);
ctx.body = {
user:'111',
code:1,
status:200
};
});
module.exports = router.routes();
```
控制台输出 { user: '123', pass: '123' }
接下来连接数据数据库,查询
const router = require('koa-router')();
const db = require('../sql/sql');
router
.post('/', async ctx => {
let user = ctx.request.body.user;
let pass = ctx.request.body.pass;
// 将接收到的前台数据和数据库中的数据匹配
// 如果匹配成功 返回status 200 code 1
// 不成功返回status 1000 code 0
db.query('select * from login where user=? and pass=?;',[user,pass]).then(res => {
console.log(res);
})
ctx.body = {
user:'111',
code:1,
status:200
};
});
module.exports = router.routes();
控制台输出[ RowDataPacket { id: 1, user: '111', pass: '111' } ]
表示拿到数据
注意
这是个数组的格式，如果将user返回给前端res[0].user,
const router = require('koa-router')();
const db = require('../sql/sql');
router
.post('/', async ctx => {
let user = ctx.request.body.user;
let pass = ctx.request.body.pass;
// 将接收到的前台数据和数据库中的数据匹配
// 如果匹配成功 返回status 200 code 1
// 不成功返回status 1000 code 0
await db.query('select * from login where user=? and pass=?;', [user, pass]).then(res => {
if (res.length === 0) { // 数据库中没有匹配到用户
ctx.body = {
code: 0,
status: 1000,
msg: 'error'
}
} else { //匹配到用户
ctx.body = {
user: res[0].user,
code: 1,
status: 200
}
}
})
});
module.exports = router.routes();
以上就是简单的前后数据交互 接下来讲解的是vuex权限验证和token
token创建token我们要用到
验证token的网站
创建token中间件
在koa2中新建文件夹token
token下新建一个addtoken.js用于创建token再新建一个proving.js用于验证token
addtoken
const jwt = require('jsonwebtoken');
const serect = 'token'; //密钥，不能丢
module.exports = (userinfo) => { //创建token并导出
const token = jwt.sign({
user: userinfo.user,
id: userinfo.id
}, serect, {expiresIn: '1h'});
return token;
};
在router/login中引入
const router = require('koa-router')();
const db = require('../sql/sql');
const addtoken = require('../token/addtoken');
router
.post('/', async ctx => {
let user = ctx.request.body.user;
let pass = ctx.request.body.pass;
// 将接收到的前台数据和数据库中的数据匹配
// 如果匹配成功 返回status 200 code 1
// 不成功返回status 1000 code 0
await db.query('select * from login where user=? and pass=?;', [user, pass]).then(res => {
if (res.length === 0) { // 数据库中没有匹配到用户
ctx.body = {
code: 0,
status: 1000,
msg: 'error'
}
} else { //匹配到用户
let tk = addtoken({user:res[0].user,id:res[0].id}) //token中要携带的信息，自己定义
ctx.body = {
tk, //返回给前端
user: res[0].user,
code: 1,
status: 200
}
}
})
});
module.exports = router.routes();
vuex
拿到了后台的token，我们要做什么呢？
存到localStorage中 在src/components/login.vue中将token和user存进localStorage中 存到vuex中 npm install --save vuex这看自己的需求了 回到前端 我们改一下路由
没改之前
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'login',
component: resolve => require(['@/components/login'],resolve)
},
{
path: '/homes',
name: 'homes',
component: resolve => require(['@/components/homes'],resolve)
}
]
})
改过之后
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router);
const router = new Router({
routes: [
{
path: '/',
name: 'login',
component: resolve => require(['@/components/login'], resolve)
},
{
path: '/homes',
name: 'homes',
meta: {
auth: true
},
component: resolve => require(['@/components/homes'], resolve)
}
]
});
router.beforeEach((to, from, next) => {
if (to.meta.auth) { //权限判断
if ('进行判断') { //读取token值
// 成功
next()
} else {
next({path:'/'})
}
} else {
// 没有meta.auth 不用管
next()
}
});
export default router;
在路由中要验证的地方添加meta：{auth：true}
接下来就是创建vuex
在src下新建文件夹vuex
全局引入vuex
在vuex中新建store.js文件
import Vue from 'vue';
import Vuex from 'vuex'
Vue.use(Vuex);
const store = new Vuex.Store({
state:{
user:localStorage.getItem('user') || '',
token:localStorage.getItem('token') || null
}
});
export default store;
接下来改一下路由中的权限判断
router.beforeEach((to, from, next) => {
if (to.meta.auth) { //权限判断
if (localStorage.getItem('token')) { //读取token值
// 成功
next()
} else {
next({path:'/'})
}
} else {
// 没有meta.auth 不用管
next()
}
});
在login.vue中接收到数据后添加
localStorage.setItem('token', data.data.tk) //存储token
localStorage.setItem('user', data.data.user) //存储用户
this.LOGIN({
token:data.data.tk,
user:data.data.user
});
这样就将token拿到了并存进localStorage中，接下来就是将token在发送的时候 添加进头部中 发送给后台
在axios/axios.js中
axios.defaults.headers.common['Authorization'] = 'Bearer '+ localStorage.getItem('token');
在登陆的时候这样就会将token发送给后台了
后台验证前台发送的token
const jwt = require('jsonwebtoken');
const serect = 'token'; //密钥，不能丢
module.exports =(tokens) => {
if (tokens){
let toke = tokens.split(' ')[1];
// 解析
let decoded = jwt.decode(toke, serect);
return decoded;
}
};
在login.js中，添加
router.get('/test',async (ctx,next) => {
let token = ctx.request.header.authorization;
if (token){
// 获取到token
let res = proving(token);
if (res && res.exp <= new Date()/1000){
ctx.body = {
message: 'token过期',
code:3
};
} else {
ctx.body = {
message: '解析成功',
code:1
}
}
} else{ // 没有取到token
ctx.body = {
msg:'没有token',
code:0
}
}
});
项目至此算是告一段落，大家可以把我的项目clone到本地下运行 项目地址
运行方式 运行vue npm start 在koa2下运行app.js node app.js 项目中也许有很多写的不对的地方，或者不规范什么的 大家就引以为戒， 项目有时间会更新，都是些小东西，大家可以看一下，大牛绕路哦版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
