主页模块功能实现
1.登录页成功之后，跳转进入主页 路由跳转： this.$router.push(地址)
2.通过路由导航守卫 实现跳转限制 优化设置白名单数组 关键字includes(to.path) true/false
(1)登陆用户不能再次回到login
(2)没有登陆就不能访问除login之外的其它页
(3) beforeEach中启动进度条，在afterEach中停止进度条
3. 优化左侧导航样式 ,设置内容布局
4. 路由跳转时，获取用户个人信息,保存到vuex
(1) 在api/user 中封装好 用户信息接口 store/user 中调用该方法 $store.dispatch()
(2) 路由守卫中 发送axios 请求 (注意点:添加模块名) 异步函数actions中定义该方法
(3) state中 定义空对象 通过commit 方法修改 context.commit('方法名',参数)
(4) 获取用户id , 封装api接口获取员工基本信息 传参id
(5) 根据用户id（rs.data.userId）调用api发送请求，获取详情（包含头像）
(6) 通过展开运算符 {...obj1,...obj2}合并对象 传参 调用commit 方法修改 存到state对象中
(7) 渲染页面 (用户头像/用户名) this.$store.state.模块名.数据项
5.用户退出
(1) 清空token 用户基本信息 (触发事件源,调用actions中封装的方法,清空数据)
(2) 退出到登录并携带参数
2.1 通过局部路由对象$route 获取当前页面的的路径 this.$route.fullPath
2.2 登录页面 定义变量 来接收 该路径 this.$router.push('/login?return_url='+ encodeURIComponent(this.$route.fullPath) )
2.3 (路径拼接) 通过 encodeURIComponent() 方法 对url进行编码
注意点: router是通过“Vue.use (VueRouter)”和VueRouter构造函数得到一个实例对象，它是一个全局的对象。 route是一个跳转的路由对象，每一个 路由都会有一个route对象，是一个局部的对象。
(3)登录成功 不进入主页=>进入指定的页面(退出之前的页面)
3.1 通过this.$route.query.变量名 记录登录前的页面地址 ,实现跳转登录前页面
3.2 无退出 跳转路径不存在 通过短路运算 跳转主页
6. token失效优化
1.与用户退出功能一致,在响应拦截器中，分析接口的返回值，如果状态码为10002， 则进行token失效操作
2.清空token与用户信息
3. router.currentRoute.fullPath 获取退出前页面地址
网友评论