vue+koa2+token登錄驗證

時間 2019-11-08

標籤 vue+koa2+token vue koa token 登錄驗證简体版

原文原文鏈接

koa2+vue

用vue-cli搭建前端項目
用koa2搭建後臺，給前端提供數據訪問接口

項目結構

用vue-cli 搭建的項目，紅色框中是新建的文件夾用於存放koa
剩下的文件在寫項目中慢慢增長，最初就是這樣的
以後將項目跑起來，看一下有沒有問題（這裏就看成沒有問題）

前端

這裏選用Element-ui和vue搭配
這裏採用的是element-UI的完整引入，若是小夥伴想用按需加載的話參考按需引入
登錄頁面就不介紹了你們能夠直接用（components/login.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

學習koacss

安裝koa2 koa-bodyparser koa-router koa2-cors npm install --save koa koa-bodyparser koa-router koa2-cors

[x] koa-bodyparser：用於接收並解析前臺發送過來的post數據
[x] koa-router：路由
[x] 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 也能夠直接在瀏覽器中測試vue

postmainmysql

chrome瀏覽器直接在瀏覽器中測試ios

能取到數據那就說明沒有問題
接下來開始鏈接數據庫數據庫用的是 mysqlgit

建立數據庫

我在本地用的是mamp+navicat 你們能夠用本身熟悉的
安裝mysql-pro 一個鏈接數據庫的中間件npm install mysql-pro
接下來在建立表
須要的字段
| id | user | pass |
| --- | --- | --- |github
隨便添加兩個就能夠了，這裏沒有作驗證，須要的小夥伴能夠本身添加這個功能
到此就結束了，咱們來驗證一下

在koa2/sql下新建一個js文件web

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

看一下咱們在前端拿到的數據vue-router

由於咱們用了中間件koa-bodyparser ,在koa2/router/login.js中這樣寫sql

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咱們要用到
[x] 驗證token的網站
[x] 建立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 = {