vue页面控制权限,vuex刷新保存状态、登录状态保存（推荐阅读）

对于一个网站，有些页面是需要登录后才能访问的，这个时候需要做到权限管理

---

1、页面权限控制

---

这个常见做法是，在路由跳转的时候做判断，通过router钩子函数判断页面是否需要登录

首先在router配置 meta属性

 

然后在钩子函数里面判断

 

to.meta.requireAuth为true就跳去登录页面登录，否则就直接到要访问的页面

---

2、vuex页面F5刷新后维持刷新前的状态不变

---

对于在当前访问网页使用F5刷新之后，页面的变量和参数都会丢失，这时页面显示的内容会变得不友好，用户体验不好，我们可以通过将页面的参数和变量保存到sessionStorage中，当刷新后再从sessionStorage将变量和状态取回来渲染回页面，那样F5刷新后，用户看到的页面还是刷新前的。

首先在store的index.js中，state，增加页面要保存的变量，并且将它们的值和sessionStorage里面的绑定

 

 

然后再新增mutations，这是将变量写入sessionStorage的方法

 

接着就可以在登录函数中这样调用，登录成功后将需要的变量写进sessionStorage

 

在路由的钩子函数里面可以这样将变量取回来，那样页面刷新后，也能将刷新前的状态保持

---

3、登录状态保存

---

我们在网页中，常常有一个功能，就是像下图那样，勾选后十天内免登录，也就是记住登录状态

这个较上面的功能有一个不一样的地方就是，上面的刷新，假如我是登录状态，我将浏览器关闭之后再打开，再打开浏览器，我还是需要登录的

那如果我勾选了十天内免登录，登录后没有退出，然后把浏览器关闭了，再重新打开，是不需要登录的，这个功能怎么实现呢?

这就要用到localStorage来实现了

首先，一样需要在store的index.js中，state，增加页面要保存的变量，并且将它们的值和localStorage里面的绑定

 

然后再新增mutations，这是将变量写入localStorage的方法

---

 

需要一个自动登录的方法，如果是勾选了就为true，然后就会将需要用到的变量写到localStorage

当然还有登出的

 

接着就可以在登录函数中，根据有没有勾选自动登录来判断，是不是在登录成功后将需要的变量写进localStorage

 

最后在路由的钩子函数里面做相应的处理

是不是需要登录，然后有没有勾选自动登录，根据布尔值来进行不同的路由操作，然后需要用到的变量操作其实和上面保持页面刷新后的是大同小异的

当然这里还需要一个后台的校验接口，就是在勾选了自动登录后，如果是10天期限，那就要在进入true 的分支后再请求后台去校验token是否过期，如果过期就要重新登录了，否则就一切照常

---

小结

---

这次总结了前端页面登录校验的常见三种情况，在日常开发中经常遇到，如有纰漏请指出和交流