最近一在做一个后台管理系统,项目主要使用webpack搭建框架,前端开发使用Vue,构建单页面应用,涉及到一些用户权限问题。
在开发过程中遇到了一些值得注意的问题,巧妙的运用浏览器缓存解决了一些问题。
本次只描述解决方案,就不贴代码了,感觉贴代码没什么意义,知道思路就可以了。
首先用到localStorage的地方是在登陆页,用户登陆成功后,后台会返回用户的一些基本信息,包括用户id,用户名称等等。。。这些信息在登陆之后的其他Vue组件是需要用到的,所以把这些信息存在本地,什么时候用,直接从本地缓存里取就可以了。其实这里还可以使用Vue提供的VueX来进行数据共享,但是个人觉得,只是存一些简单的数据,没必要。
然后sessionStorage的运用主要来源于一个比较蛋疼的需求,需求大概是这样的:页面加载,前端发送请求拿到用户的权限信息来判断用户的默认首页显示哪一页,然后路由跳转到该页。那么问题来了,当用户成功登陆之后,跳到用户权限下的默认第一页,然后再通过菜单进入其他页面之后,再点刷新,又跳到该用户权限下的默认第一页。这样非常**疼。为了实现能在本页刷新,就想到了会话级别的sessionStorage,当用户首次登陆之后,在判断默认展示页之后手动添加一个sessionStorage,下次再刷新页面,判断sessionStorage是否有值,有则说明只是在当前页刷新,则不跳转,无责说明用户是关闭之后进来的,再进行判断跳转。。。。