项目功能模块总结

登录

1.表单校验

2.登陆接口封装 请求方法封装

3.响应拦截器处理响应数据

4.使用vuex存储token

5.token持久化(封装auth方法或用vuex插件)

6.在actions中调用请求接口

7.请求拦截器统一注入token

根据token控制页面访问

// 路由的前置守卫
router.beforeEach(function(to, from, next) {
  if (store.getters.token) {
      if(to.path === '/login'){
         next('/')
      } else {
         next()
      }
  } else {
    // 如果没有token
    if (whiteList.indexOf(to.path) > -1) {
      // 如果找到了 表示在在名单里面
      next()
    } else {
      next('/login') // 跳到登录页
    }
  }
})

登出

1.确认是否登出

2.前端登出

3.清除token及其他vuex

4.携带当前页面路径跳转登录页

5.后端登出

调用接口

token失效处理

在响应拦截器的错误处理中进行401处理

  if (error.response && error.response.status === 401) {
      // 处理某些页面多个请求多次401重复跳转问题，造成重新登录后不能正确跳转到上次访问页面问题
      if (router.currentRoute.path === '/login') return
      // 1. 错误提示
      Message({
        message: error.response.data.message,
        type: 'error',
        duration: 5 * 1000
      })
      // 2. 登出action 删除token和用户信息
      store.dispatch('user/logout')
      router.replace(`/login?redirect=${router.currentRoute.path}`)
    }

根据权限配置路由和页面

静态路由 不需要权限就可以访问的页面

动态路由 需要权限访问的页面

1.拆分静态路由和动态路由

2.准备页面

3.模块化路由

4.配置路由

5.引入合并所有动态路由

6.获取用户权限菜单数据

7.和所有动态路由做过滤得到最终权限菜单

8.添加到路由的配置系统

9.通过vuex存储路由(静态路由和权限获得的动态路由)

10.修改菜单渲染为vuex存储的路由

11.动态路由刷新问题修复

刷新404问题

将404路由添加到动态路由之后