解决vue router组件状态刷新消失的问题
场景:vue-router实现的单页应用,登录页调用登录接口后,服务器返回用户信息,然后通过
router.push({name: 'index', params: res.data})跳转到主页,并在主页显示数据。但是当刷新页面时,由于并不是通过登录接口进入主页,router中没有‘params: res.data'信息,主页无法获取到登录信息。
解决方案:
1、session&服务器渲染
传统的方案是,登录页和主页是单独的两个页面,登录成功后服务器生成用户信息对应的session,然后渲染主页数据,并通过响应头将sessionid传给浏览器并生成相应的cookie文件。这样下次请求页面时,浏览器会在http header带上相应的cookie,然后服务器根据cookie中的sessionid判断用户是否登录,再显示用户数据。
如果项目采用前后端分离思想,服务器只提供接口,不进行服务器渲染,那么这种办法是行不通了。
2、$route.query
我们可以在路由跳转的时候带上登录请求的参数:
router.push({name:'index', query:{username: 'xxx', password: 'xxxxxx'}}) ... this.$ajax({ url: 'xxx', method: 'post', data: { username: this.$route.query.username, password: this.$route.query.password } })
这样登录参数会被保存在url中,像这样:“ http://xxx.xxx.xxx/index?username=xxx&password=xxxxxx ”,然后在created钩子中调用登录接口来返回数据。
即使密码进行了加密,将用户名密码这类敏感信息放在url中肯定也是不合理。
3、cookie
另一个办法是把登录参数存入cookie,然后在created钩子中获取cookie中存的信息,再调用登录接口。将用户名密码存入cookie中同样不合理,改进版是登录成功后服务器返回一个token,在有效期内通过token获取用户数据。
cookie存取数据比较麻烦,因为cookie是一个字符串,保存的键值对以 "=" 链接,需要额外写操作cookie的方法。
function setCookie (name, value, exdays) { let date = new Date() date.setTime(date.getTime() + (exdays * 24 * 60 * 60 * 1000)) let expires = 'expires=' + date.toGMTString() document.cookie = name + '=' + value + '; ' + expires } function getCookie (name) { name = name + '=' let cookieArr = document.cookie.split(';') for (let i = 0; i < cookieArr.length; i++) { let cookie = cookieArr[i].trim() if (cookie.indexOf(name) === 0) { return cookie.slice(name.length) } } return '' }
4、HTML5 Web存储
提到Web存储,潜意识肯定觉得很多浏览器都不支持,其实IE8及以上都支持localStorage和sessionStorage了。Vue项目最低支持IE9,所以可以放心的使用Web存储。
localStorage存储数据没有时间限制,不主动删除就不会失效。而sessionStorage是在页面或者浏览器关闭时就会失效,适合本场景应用。
我们可以把token信息存在sessionStorage中,然后每次刷新页面通过token请求数据;但是既然能够把token存储到本地,为什么不直接把常用的数据直接保存到本地呢?利用本地数据,可以减少客户端网络请求,还可以降低服务器负担。
由于sessionStorage中保存的值是字符串,直接赋值非字符串类型会先调用其toString()方法。例如执行
sessionStorage.user = user,保存的值却是[object Object]。我们可以通过JSON.stringify()将需要保存的对象转为JSON字符串再保存到sessionStorage,然后在需要使用时通过JSON.parse()将字符串转回对象。
let user = { name: 'admin', address: 'xxx', email: 'xx@xx.xx' } // sessionStorage.user = user // [object Object] sessionStorage.user = JSON.stringify(user) ... let data = JSON.parse(sessionStorage.user)
总结
以上所述是小编给大家介绍的解决vue router组件状态刷新消失的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
- vue-router组件状态刷新消失的问题
- vue-router路由参数刷新消失的问题解决方法
- 解决element-ui中el-menu组件作为vue-router模式在刷新页面后default-active属性与当前路由页面不一致问题的方法
- Win7 桌面 刷新 不消失 问题解决方法
- js生效后页面自动刷新的问题(js控制button,生效效果闪一下消失)解决
- 解决当刷新页面,按钮控件保留的状态的问题(asp.net)
- vuejs 解决数组子组件,在子组件相同情况下,splice更换或删除数组数据,组件不刷新,组件外能刷新的问题
- Android 自定义listview 添加监听器 解决屏幕滑动组件状态干扰的问题checkbox
- android自定义listview,添加监听器,解决屏幕滑动组件状态干扰的问题checkbox ...
- 解决UITableViewCell选中状态下UILabel背景消失的问题
- 解决Delphi开发DLL中窗体按钮显示状态不刷新问题.
- android自定义listview,添加监听器,解决屏幕滑动组件状态干扰的问题checkbox
- 关于页面刷新vuex数据消失问题解决方案
- 本地连接状态 属性按钮消失 解决过程(DCOM配置问题)(原创*转载留名)
- 页面刷新vuex数据消失问题解决方案 之 vuex中间件
- 解决IIS配置HTTPS证书完成证书后刷新后证书消失问题
- 解决,当列表进入详情页的时候,操作完使用浏览器的返回,状态依然是之前的,需要手动刷新的问题
- 解决vue router使用 history 模式刷新后404问题
- vue 后台数据获取与组件渲染、页面刷新数据消失的问题小结
- 解决swipe_container,在oncreate中无法显示刷新状态的问题