vuex刷新页面丢失登录的token信息的解决方案 |
您所在的位置：网站首页 › 刷新页面后再次登录 › vuex刷新页面丢失登录的token信息的解决方案 |
|
vuex刷新页面丢失登录的token信息的解决方案
最近真的是和这个token给干上了，被这个token验证搞的非常无语了 先记录几个问题： 后端设置了token的有效期，前端也设置了请求拦截和响应拦截，响应拦截中也对状态码为401的token返回错误状态码进行了token清除，但是localstorage中一直没有清除token，还是可以保持登录，让人抓狂；每次刷新页面，就会丢失登录用户的信息，让人抓狂+1；每次关闭页面，再重新进入页面，用户登录信息再次丢失，抓狂，，，；抓狂了一整天，还是解决了，貌似解决了，记录一下 前后端生成使用token的流程后端怎么写token，前端怎么用token，我不想再说了，前面两篇博客都写了，我直接上代码 后端生成token的代码： // 登录 exports.login = (req, res) => { const userinfo = req.body; // console.log(userinfo) const sql = "select * from users where username = ?"; db.query(sql, userinfo.username, (err, results) => { if (err) return res.status(404).json(err); if (results.length !== 1) return res.status(400).json("用户不存在"); const compareResult = bcrypt.compareSync( userinfo.password, results[0].password ); if (!compareResult) return res.status(400).json("用户名或密码错误"); const user = { id: results[0].id, username: results[0].username, email: results[0].email, identify: results[0].identify }; const tokenStr = jwt.sign(user, config.jwtSecretKey, { expiresIn: 36000 }); // if (jwt.verify(tokenStr, config.jwtSecretKey, (err, decode) => { // if (err) return res.status(401).json(err) // })) res.json({ status: 200, message: "登录成功", token: "Bearer " + tokenStr, }); }); };前端登录的时候用把token写到localstorage中： submitForm(formName) { this.$refs[formName].validate(valid => { if (valid) { this.$axios.post('/user/login', this.loginUser) .then(res => { const { token } = res.data // console.log(token) localStorage.setItem('mytoken', token) // 解析token const decode = jwt_decode(token) console.log(decode) // 将解析后的token存入vuex中 this.$store.dispatch('setAuthenticated', !this.isEmpty(decode)) this.$store.dispatch("setUser", decode) this.$router.push('/') }) .catch(err => { // console.log(err) this.$message.error('登录失败，请检查用户名及密码是否正确！') }) } else { this.$message({ type: "error", message: '错误提交申请' }) return false } }) },逻辑就是，后端生成了一个token，并设定了token的有效期，然后前端请求接口时，获取到这个token，并将这个token命名为mytoken存到本地，并将解码后的token存放到vuex的state.user中（this.$store.dispatch("setUser", decode))。空口无凭，我放一下我的store/index.js文件中的setUser const actions = { setAuthenticated: ({ commit }, isAuthenticated) => { commit(types.SET_AUTHENTICATED, isAuthenticated); }, setUser: ({ commit }, user) => { commit(types.SET_USER, user); }, clearCurrentState: ({ commit }) => { commit(types.SET_AUTHENTICATED, false); commit(types.SET_USER, null); }, };好了，token放在localstorage中了，至于要不要将token存放到vuex的state.user中，不影响token的过期删除使用 正常的逻辑是对axios进行二次封装，在请求拦截和响应拦截中对token进行处理，正常的逻辑代码如下： import axios from "axios"; import { Message, Loading } from 'element-ui'; import router from "./router" // 请求拦截 axios.interceptors.request.use(config => { if(localStorage.eleToken){ // 设置统一的请求头 config.headers.Authorization = localStorage.eleToken } return config }, error => { return Promise.reject(error) }) //响应拦截 axios.interceptors.response.use(response => { return response }, error => { // 错误提醒 endLoading(); Message.error(error.response.data) // 获取错误状态码 const {status} = error.response if(status == 401){ Message.error("token失效，请重新登录") localStorage.removeItem('eleToken') router.push('/login') } return Promise.reject(error) }) export default axios逻辑不解释了，就是请求头设置验证，响应时发现状态码为401就表示token过期了应该删除，可是让我抓狂的时，设置了10s的过期时间，页面还是一直保持着登录状态，，面向百度和CSDN编程了大半天没发现错在哪里，于是放弃了用这个方案。 解决方法： 其实已经在我上一篇博客中提到了，我今天又完善了一下，记录一下代码： // 路由守卫 import jwt_decode from 'jwt-decode' router.beforeEach((to, from, next) => { // const EXPIRESTIME = 36000 const isLogin = localStorage.mytoken ? true : false; if (isLogin){ const decode = jwt_decode(localStorage.mytoken) const date = parseInt(new Date().getTime() / 1000) if ((date - decode.iat) > (decode.exp - decode.iat)){ localStorage.removeItem('mytoken') next("/login"); } } if (to.path == "/login" || to.path == "/register") { next(); } else { isLogin ? next() : next("/login"); } });上面这段代码写在我的路由处理文件router/index.js文件中 可以看出，我并没有另外再设置过期时间，而是根据后端返回的token的创建时间（decode.iat)和到期时间（decode.exp）的差与当前时间(date)和创建时间之差进行比较，这样更科学 好了，第一个问题解决了，进入下一个问题。 vuex刷新页面丢失登录信息这个问题非常好解释，因为我的用户信息存储在store中（也就是vuex中），每次刷新页面的时候，store的数据就会被释放，所以就丢失了用户信息，怎么处理呢，每次重载页面的时候，将用户信息写在页面的sessionstorage中，代码如下： created() { // 在页面加载时读取sessionStorage里的状态信息 if (sessionStorage.getItem('store')) { this.$store.replaceState( Object.assign( {}, this.$store.state, JSON.parse(sessionStorage.getItem('store')) ) ) } // 在页面刷新时将vuex里的信息保存到sessionStorage里,beforeunload事件在页面刷新时先触发 window.addEventListener('beforeunload', () => { sessionStorage.setItem('store', JSON.stringify(this.$store.state)) }) // console.log(this.$store.state) }代码写在主组件App.vue中，逻辑也很好解释，就是每次刷新页面之前，将vuex里的信息保存到sessionStorage里，具体方法是设置一个名为store的item存进去，然后每次重新加载页面的时候，只要发现页面的sessionStorage中存了’store’，就将已经释放掉了的store数据（注意，这个不是刚才命名的store）中写入这个sessionStorage中存的’store’，这样，每次刷新页面，都会重新把数据写到store中，算是解决问题了 但是，有个问题是，只要一关闭页面，sessionstorage中的数据就没有了，，， 也就是说，关闭页面后，再打开页面，localstorage中有token，可以避开设置好的路由守卫进入页面，但是却没有用户信息，页面上有需要显示用户信息的，或者需要用户权限的功能全部没有了，真是操蛋，， 因此进入下一个问题 vuex关闭页面丢失登录信息的解决方案我直接上代码吧 created() { // 在页面加载时读取sessionStorage里的状态信息 // if (sessionStorage.getItem('store')) { // this.$store.replaceState( // Object.assign( // {}, // this.$store.state, // JSON.parse(sessionStorage.getItem('store')) // ) // ) // } // // 在页面刷新时将vuex里的信息保存到sessionStorage里,beforeunload事件在页面刷新时先触发 // window.addEventListener('beforeunload', () => { // sessionStorage.setItem('store', JSON.stringify(this.$store.state)) // }) // console.log(this.$store.state) if (localStorage.getItem('mytoken')) { const decode = jwt_decode(localStorage.mytoken) // console.log(decode) this.$store.dispatch("setUser", decode) // this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(decode))) } // window.addEventListener('beforeunload', () => { // localStorage.setItem('mytoken', localStorage.mytoken) // }) },依然写在App.vue中，看到没，我把sessionstorage相关的代码全部注释起来了 然后实际上就是把localstorage中的mytoken解析出来，然后传递给store中的user，就这样，每次加载页面的时候，总能保证store中是有用户信息的，除非token失效。 大功告成，就是不知道明天上班会报什么稀奇古怪的错来，，， |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |