koa2+vue实现登录以及是否登录控制

     这里咱们先说说登录以及登录状态控制须要的插件jsonwebtoken,jsonwebtoken就能够实现token的生成与反向解密出用户数据。安装步骤: npm install jsonwebtoken --save

安装以后先建立一个token.js, 为了项目目录的清晰，能够建立一个token文件夹,将token.js放到里面。文件建立OK以后,该是写内容了,写内容以前先说说jsonwebtoken提供的方法:

一、sign： 生成token、二、decod: 解析token。 这两个方法就是咱们经常使用的加密和解密用的方法。

　　token.js 咱们先定义两个方法addtoken(生成token)、decrypt(解析前台传递的token), 这里直接上代码 

　　token.js内容:

const jwt = require('jsonwebtoken');
const serect = 'token';  //生成token所须要的密钥

let token = {
    addToken: (userInfo) => {
        const token = jwt.sign({ //这个函数须要三个参数, 第一个通常是登录用户的名字, 第二个就是上面定义的密钥,第三个是过时时间 单位是s ,不过还能够写 {expiresIn:'2h'}(表明2小时)
            user: userInfo.user,
            id: userInfo.id
        }, serect, {expiresIn: 1});
        return token;
    },
    decrypt: (token) => {
        if (token) {
            let toke = tokens.split(' ')[1];
            // 解析
            let decoded = jwt.decode(toke, serect); //解析token须要两个参数,密钥 以及 前台传递的token
            return decoded;
        }
    }
}

exports = module.exports = token;

　　而后修改登录接口, 登录以后要将生成的token传递给前台, 直接看代码:

const addToken = require('../token/token')

router.post('/login',async (ctx)=> {
    let username = ctx.request.body.username;
    let password = ctx.request.body.password
    await userModel.selectUser([username]).then(async res => {
        if (res.length === 0) {
            ctx.body = {
                code: 102,
                message: '对不起帐号不存在'
            }
        } else {
            if (await md5.MD5(password,res[0].solt) === res[0].password) {
                const token = addToken.addToken({user: res[0].name, id: res[0].id})  //主要是这里 生成token
                ctx.body = {
                    code: 100,
                    message: '登录成功',
                    token
                }
            } else {
                ctx.body = {
                    code: 101,
                    message: '对不起密码错误'
                }
            }
        }
    })
})

　　后台传递的token值,前台须要保存,咱们使用的vue因此可使用vuex将收到的token保存起来(这里提示vuex当页面刷新里面的数据会清除,因此建议保存在localStorage里面固然也可使用vuex-along 这个组件,这个组件其实就是帮咱们把vuex的数据再保存在loaclStorage里面)

axios.post('/api/login', user).then(({status, data}) => {
                    if (status === 200) {
                        if (data.code === 102) {
                            alert('对不起帐号不存在')
                        } else if (data.code === 101) {
                            alert('对不起密码不正确')
                        } else if (data.code === 100) {
                            alert('登录成功')
                            console.log(data)
                            this.$store.dispatch('tokenAddFun', data.token)
                            this.$store.dispatch('userAddFun', user.username)
                            this.$router.push('/')
                        }
                    }
                })

　　而后在每次请求的时候将token添加在请求的头信息中: 咱们使用的是axios，因此可使用axios的请求拦截器,修改其头头信息，这样就不用在每一个请求中添加。添加axios目录而后添加axios.js文件，内容以下:

import axios from 'axios'
import store from '../store'
axios.interceptors.request.use(
    config => {
        config.headers.common['Authorization'] = 'Bearer '+ store.state.token;
        return config
    }
)

export default axios

  须要请求的时候 导入本身写的这个js文件(导入本身写的这个文件以后就不须要导入 axios插件了)测试请求代码以下:

import axios from '../../../axios/axios'

axios.get('/api/userlist').then(({status, data}) => {
                    if (status === 200) {
                        if (data.code !== 100) {
                         alert('对不起,session过时,请从新登录');
                         this.$router.push('/login')
                        } else {
                            this.showData()
                        }
                    }
                })

 后台koa2接收到请求以后先对请求头携带token进行解析,而后对比是否过时,具体代码以下:

const token = require('../token/addtoken')

router.get('/userlist', async (ctx, next) => {
  let webToken = ctx.request.header.authorization; //获取头部信息携带的token
  if (webToken){
    //  获取到token
    let res = token.decrypt(webToken);  //解析token
    if (res && res.exp <= new Date()/1000){ //进行时间对比
      ctx.body = {
        message: 'token过时',
        code:102
      };
    } else {
      ctx.body = {
        message: '解析成功',
        code:100
      }
    }
  } else{  // 没有取到token
    ctx.body = {
      msg:'没有token',
      code: 101
    }
  }
})

 后台经过上述的方法,将数据以及登录状态传递给前台,前台进行逻辑判断 就能够实现登录状态的判断

以上是本身实现登录状态判断的一个小例子,若是有不正确的地方,麻烦留言提醒，谢谢