vue+express中token使用

1、express服务器上安装jsonwebtoken

cnpm i -S jsonwebtoken

根目录下新建token_vertify.js 

var jwt = require('jsonwebtoken')
var signkey = 'mes_qdhd_mobile' //密钥

//设置token
exports.setToken = function (username) {
    return new Promise((resolve, reject) => {
        var token = jwt.sign({
            username: username
        }, signkey, {
            expiresIn: 60 * 60 * 24 * 3 //表示3天后token过期
        });
        resolve(token)
    })
}

//验证token
exports.verToken = function (token) {
    return new Promise((resolve, reject) => {
        jwt.verify(token, signkey, (error, decoded) => {
            if (error) {
                reject(error)
            } else {
                resolve(decoded)
            }
        })
    })
}

user.js

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    token: localStorage.getItem("token") ? localStorage.getItem("token") : "",
    moreUserInfo: JSON.parse(localStorage.getItem('moreUserInfo')),
  },
  mutations: {
    setToken(state, {
      token
    }) {
      localStorage.setItem("token", token)
      state.token = localStorage.getItem("token")
    },
    delToken(state) {
      state.token = '',
        localStorage.removeItem('token')
    },
    setMoreUserInfo(state, {
      moreUserInfo
    }) {
      localStorage.setItem('moreUserInfo', JSON.stringify(moreUserInfo))
      state.moreUserInfo = JSON.parse(localStorage.getItem('moreUserInfo'))
    }
  },
  actions: {},
  modules: {}
})

login.vue

axios.js

router/index.js

let vm = new Vue();
router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) {
    if (store.state.token) {
      next();
    } else {
      next({
        name: "login",
        params: {
          redirect: to.fullPath
        }//这个params很关键。它保证了登录成功后会跳转到指定的页面，而不是直接去首页
      })
      vm.$message({
        message: "您还未登录",
        showClose: true,
        type: "warning"
      });
    }
  } else {
    next();
  }
})