Vue + Element UI 实现权限管理系统 前端篇（四）：优化登录流程

完善登录流程

1. 丰富登录界面

1.1 从 Element 指南中选择组件模板丰富登录界面，放置一个登录界面表单，包含账号密码输入框和登录重置按钮。

1.2 稍微调整一下界面样式

1.3 添加页面组件显示规则和操作响应，其中登录成功后，把登录用户信息存储到本地会话，用于配置路由跳转目标。

1.4 最后效果如下图所示。

2.修改接口

修改 http/interface.js，把请求类型改为 post，并传入 data 参数。

export const login = data => {
    return axios({
        url: '/login',
        method: 'post',
        data
    })
}

3.修改 mock 接口

修改 mock/modules/logins.js，把请求类型改为 post。

// 登录接口
export function login () {
  return {
    // isOpen: false,
    url: 'http://localhost:8080/login',
    type: 'post',
    data: {
      'msg': 'success',
      'code': 0,
      'data': {
        'token': '4344323121398'
        // 其他数据
      }
    }
  }
}

4.添加导航守卫

在 router/index.js 中添加导航守卫，如下图所示，根据用户登录会话记录，路由到主页或登录界面。

5.修改主页界面

 5.1 向 home.vue 添加组件，构建主界面。

5.2 处理页面事件和页面数据显示，主要是两个事件和在 mounted 函数内获取页面数据。

5.3 修饰调整 css 样式，构建界面，样式太多，就不贴了，直接看源码 ，调整完效果如下图所示。

6.嵌套路由

6.1 在 views 目录下新建 Main、User、Menu 页面，用于菜单路由，内容随便显示点什么就可以。

6.2 在 router/index.js 文件中添加子路由，分别指向子页面。

 6.3 在 views/Home.vue 页面对应的导航菜单中添加点击事件，路由到对应的子页面。

6.4 登录之后，点击用户管理，路由到用户管理界面。

6.5 点击菜单管理，路由到菜单管理界面。

6.5 这里发现点击导航菜单之后，菜单就不能点击了，经查看是导航页面坐标样式问题，把用户管理等页面的样式去掉就好了。

6.6 同理添加机构管理、角色管理、日志管理的菜单之后，效果如下。