登录-主页模块开发小结

后管项目小结我打算分三个方面进行总结：

1.开发思路 2.功能实现 3.Bug归纳

1在登录模块已经构建后，我第一步的思路就是从登录页面到主页的跳转。那跳转的时候就不得不考虑路由导航守卫，以用token为核心控制路由页面的跳转

graph TD
登录页面 --> 路由守卫 
首页 --> 路由守卫

//  to:要去哪个页面
//  from:从哪里来
//  next:它是一个函数。
//     如果直接放行 next()
//     如果要跳到其它页 next(其它页)
router.beforeEach((to, from, next) => {
  console.log(to, from)
  next()
})

注意：

1.使用一个独立的permission.js文件用来设置路由守卫更方便

2.页面路由跳转时，一定会进入前置路由守卫

3.路由守卫中一定要调用next

2用路由导航守卫实现两个跳转限制

3在解决完路由导航守卫后就迎来了头疼耗时间的主页的样式修改，首先是头部导航栏，以及侧边栏的样式也可以先改一下，总之要把主页面需要修改的样式这个时候都改完整

4接下来是用户的登录信息，由于用户资料数据是需要在多个组件中共享的数据，所以我们按照我们之前定好的原则，如果接口获取到的数据需要共享，那么该状态数据的操作，我们都放到vuex中来集中管理

5 实现用户退出登录功能：一般的做法就是弹窗提示是否退出，首先封装用来退出的action，然后在点击退出的时候调用action，跳转登录页面


      logout() {
      // 弹层询问，是否退出
      this.$confirm('你确定要离开吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await this.$store.dispatch('user/logout')
        this.$router.push(`/login`)
      }).catch(() => {
        // 用户取消退出
      })
    }

6在实现退出功能时候要考虑到如果用户退出主页后想重新进入退出时的页面，要怎么把地址留住。所以在访问login这个页面时，可以在地址栏中补充一个查询字符串来指定登陆成功之后要去到的页面

# 访问登录页，并且告诉它，登录成功之后要进入 /abc
http://localhost:8080/#/login?return_url=/abc

7在退出时，跳回login时，回传当前的路径

 this.$router.push('/login?return_url=' + encodeURIComponent(this.$route.fullPath))

注意

$route.path:只有路径的信息

$route.fullPath：路径+查询参数的信息

return_url：这个名字是自己约定的，它要和login/index.vue中跳转代码保持一致。

encodeURIComponent：是js的内置API,用来对url进行编码

8token失效处理：token作为用户的关键令牌信息不是长久有效的，一般都会有一个失效时间(由后端来决定什么时长后失效)，如果超过失效时间，当前token就不能再作为用户标识请求数据了，这时候我们需要做一些额外的失效处理

后端：收到用户访问某个接口时，检查当前token是否失效，如果token已经失效，返给前端一个约定好的状态码 10002

前端：在响应拦截器中，分析接口的返回值，如果状态码为10002，则进行token失效操作

// 响应拦截器中
//  1. 根据后端返回数据判断本次操作是否成功,不成功主动报错
//  2. 如果成功，只返回有效数据
service.interceptors.response.use(
  response => {
    // 后端和前端的约定：success=true表示请求成功
    if (response.data.success) {
      return response.data
    } else {
      // 如果success为false 业务出错,直接触发reject
      // 被catch分支捕获
      return Promise.reject(new Error(response.data.message))
    }
  },
  async error => {
    console.log('请求出错啦', error)
    if (error.response.data.code === 10002) {
      console.log('token失效')
      await store.dispatch('user/logout')
      // .vue -- this.$route.fullPath
      //  .js -- router.currentRoute.fullPath

      router.push('/login?return_url=' + encodeURIComponent(router.currentRoute.fullPath))
    }
    console.dir(error)
    return Promise.reject(error)
  }
)

Bug汇总

基本错误，变量名没有修改完整，在其他地方调用的时候没有修改

跨域问题：端口地址与本机地址设置不匹配

请求失败，请求的数据打印不出来，响应拦截器设置出错，把response写成promise 还有把url编码代码写在了拦截器外面导致删除token跳转失效

后管项目 登录-主页模块开发小结