vue+express中token使用

tech2025-05-02  6

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(); } })

 

最新回复(0)