vue+express中token使用

桃扇骨 2021-07-25 15:59 637阅读 0赞

1、express服务器上安装jsonwebtoken

cnpm i -S jsonwebtoken

根目录下新建token\_vertify.js

![20200904093247836.png][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

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: {}
    })

![20200904102545864.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1][]

axios.js

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2][]

router/index.js

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 3][]

[20200904093247836.png]: /images/20210725/ea0cf390cbf142bb902225918e892479.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/d24c9569e4e54c5e890c5471113ba4f8.png
[20200904102545864.png]: /images/20210725/30144599d0774b33865f726fc03c27ba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: /images/20210725/0e72b5f9e390442780e6018e1e50f40d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2]: /images/20210725/73786aa13c2e4180874822b28a2ef999.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 3]: /images/20210725/df2edb226f1148d98cab1e0e3879a7e5.png