后管系统-主页模块步骤分析

1.主页-从登陆页跳转到主页

路由跳转： this.$router.push(地址)

2.路由守卫

1. 登陆用户不能再次回到login （通过拿到token 进行判断 要去的页面也需要判断）
2. 没有登陆就不能访问除login之外的其它页

白名单：const whiteList = ['/login', '/404'] 然后通过includes检查元素在数组中是否存在

路由跳转进度条：通过NProgress.start() / done() 控制进度条的启动和结束

3.主页样式修改

4.主页显示登录用户名

数据获取：将数据保存到vuex

写actions --> mutations ---> state  在路由守卫中，发ajax请求 （获取个人信息要在进入主页之前做 next（）前 因为跳转到页面后就要显示信息了）

数据渲染 : 通过this.$store.state 或者 mapState导入 获取vuex中的值

显示登录用户名和头像:需要通过第一次请求到的用户信息中取id去请求获取头像

5.实现用户退出

退出后清空用户信息和token

退出后传回当前路径： this.$router.push('/login?return_url=' + encodeURIComponent(this.$route.fullPath)) navbar.vue

登录进入指定页面 ：this.$router.push(this.$route.query.return_url || '/') 登录成功路由跳转 login/index.vue

退出时携带路径传回 再次登录才能找到return_url

6.t