当登陆成功之后,我们需要做三件事:
1、将用户数据存储在vuex state中 以待全局其他组件的使用
2、将用户数据存储在localstorage中
3、将用户数据返回的token 添加到axios 的请求头(Authorization)中去 (这样也可以避免用户禁用cookie导致的登录问题)
===============================================================================================================
同样登出也是这三件事情
但还有更简便的方法:
因为页面重载 就会让axios头部和vuex中的数据全部清空。
===============================================================================================================
在路由中给某些页面添加权限,不登录就不能访问,如下:
然后设置路由守卫:
只有呢些 需要权限的页面并且没有登录的状态才需要 返回登录页面 否则正常进行登录
===============================================================================================================
而如果登录之后,刷新之后 会导致state和axios头部 均被清空 路由守卫会强制返回登录页
就在main.js 中,从本地存储中重新设置 state 和axios的头部
但是会出现安全问题,有个人,自己在浏览器中给localStorage加入一些数据,然后直接修改地址栏数据到权限页面,因为权限页面只是在路由规则中检测是否本地有用户数据(user),而没有检测value是否正确,所以需要在后面添加axios拦截器 如果之后页面axios因为头部信息是假的,报错 返回状态码是401没有权限 强制登出事件 如果不加这个返回的还是具体的页面只是其中的数据是没有的,后端服务token校验失败,报错。是一个凌乱的页面,所以这种时候我们直接强制登出事件,让他返回到登录页面去。
==========================================================================================