VUE通用后台管理（3）

一、登录页面

1.登录页面路由

在views中新建文件Login.vue

<template>
    <h1>我是登录页</h1>
</template>
<script>
export default {
    data() {
        return {}
    }
}
</script>

在router中的index.vue中新增登录页路由

 

 2.登录页面编写

<template>
    <el-form :model="form" :rules="rules">
        <h3 class="login_title">系统登录</h3>
        <el-form-item label="用户名" prop="username">
            <el-input v-model="form.username" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input v-model="form.password" placeholder="请输入密码"></el-input>
        </el-form-item>
    </el-form>
</template>
<script>
export default {
    data() {
        return {
            form: {
                username:'',
                password:'',
            },
            rules: {
                username: [
                    {required: true, trigger: 'blur', message:'请输入用户名'}
                ],
                password: [
                    {required: true, trigger: 'blur', message:'请输入密码'}
                ]
            }
        }
    }
}
</script>

隐藏密码显示 

登录按钮

 3.添加样式

 

<style lang="less" scoped>
.login-container {
    width:350px;
    border:1px solid #eaeaea;
    margin:180px auto;
    padding:35px 35px 15px 35px;
    background-color: #fff;
    border-radius:15px;
    box-shadow: 0 0 25px #cac6c6;
    box-sizing: border-box;
    .login_title {
        text-align: center;
        margin-bottom: 40px;
        color: #505458;
    }
    .el-input {
        width:198px;
    }
}
</style>

二、登录权限和导航守卫 

1.登录权限

安装cookie

token：判断用户是否登录（身份证） 

 

 

点击登录按钮，查看cookie是否有token

2.导航守卫 

 vue-router文档

 在main.js中添加全局前置导航守卫

//添加全局前置导航守卫
router.beforeEach((to, from, next) => {
  //判断 token存不存在
  const token = Cookie.get('token')
  //token不存在，说明当前用户是未登录，应该跳转至登录页
  if (!token && to.name !== 'login') {
    next({ name: 'login'})
  } else if(token && to.name === 'login'){ //token存在,说明用户登录，此时跳转至首页
    next({name:'home'})
  } else {
    next();
  }
})

在router的index.js文件中加入name 

 输入用户名和密码后点击登录按钮实现跳转首页

 

删除cookie中的token，输入login就能返回登陆页面

登陆页面直接输入home，无法跳转至首页了

三、登录接口逻辑实现 

加入mock数据，在api下的mockServeData中的permiss.js

import Mock from 'mockjs'
export default {
  getMenu: config => {
    const { username, password } = JSON.parse(config.body)
    // 先判断用户是否存在
    // 判断账号和密码是否对应
    if (username === 'admin' && password === 'admin') {
      return {
        code: 20000,
        data: {
          menu: [
            {
              path: '/home',
              name: 'home',
              label: '首页',
              icon: 's-home',
              url: 'Home.vue'
            },
            {
              path: '/mall',
              name: 'mall',
              label: '商品管理',
              icon: 'video-play',
              url: 'Mall.vue'
            },
            {
              path: '/user',
              name: 'user',
              label: '用户管理',
              icon: 'user',
              url: 'User.vue'
            },
            {
              label: '其他',
              icon: 'location',
              children: [
                {
                  path: '/page1',
                  name: 'page1',
                  label: '页面1',
                  icon: 'setting',
                  url: 'PageOne.vue'
                },
                {
                  path: '/page2',
                  name: 'page2',
                  label: '页面2',
                  icon: 'setting',
                  url: 'PageTwo.vue'
                }
              ]
            }
          ],
          token: Mock.Random.guid(),
          message: '获取成功'
        }
      }
    } else if (username === 'xiaoxiao' && password === 'xiaoxiao') {
      return {
        code: 20000,
        data: {
          menu: [
            {
              path: '/home',
              name: 'home',
              label: '首页',
              icon: 's-home',
              url: 'Home.vue'
            },
            {
              path: '/video',
              name: 'video',
              label: '商品管理',
              icon: 'video-play',
              url: 'Mall.vue'
            }
          ],
          token: Mock.Random.guid(),
          message: '获取成功'
        }
      }
    } else {
      return {
        code: -999,
        data: {
          message: '密码错误'
        }
      }
    }

  }
}

在api下的mock.js中，定义拦截的接口

 在api下的index.js中，定义接口

 在Login.vue页面中

引入api

添加校验：

 

输入错误密码（admin，123456） ，返回-999

输入正确密码（admin，admin），返回20000

 

 输入正确跳转页面，输入错误提示错误：

引入element-ui中的错误提示

    methods: {
        //登录
        submit() {
            // //token信息
            // const token = Mock.Random.guid()

            //校验通过
            this.$refs.form.validate((valid) => {
                if (valid) {
                    getMenu(this.form).then(({ data }) => {
                        console.log(data)
                        if(data.code === 20000) {
                            //token信息存入cookie用于不同页面间的通信
                            Cookie.set('token',data.data.token)
                            //跳转到首页
                            this.$router.push('/home')
                        } else {
                            this.$message.error(data.data.message);
                        }
                    })
                }
            })
        }
    }

 输入错误

 输入正确

 点击退出按钮清楚cookie并跳转至登录页面：

在components中的CommonHeader.vue中

import Cookie from 'js-cookie'

 handleClick(command) {
            if (command === 'cancel') {
                console.log('登出')
                //清楚cookie中的token
                Cookie.remove('token')
                //跳转到登录页面
                this.$router.push('/login')
            }
        }

 

 

四、菜单权限功能

1.不同账号登录，会有不同的菜单权限

2.通过url输入地址来显示页面

3.对于菜单的数据在不同页面之间的数据通信

在store的tab.js中

 

在views中的Login.vue中

 

在CommonAside.vue中

 

把静态字段删除或隐藏

 

正常显示，但刷新之后菜单消失

 

解决这个问题，用cookie做缓存

在tab.js中引入cookie

 

 

 调用cookie的set方法添加数据

 在CommonAside.vue中