element十 权限设计

• 什么是权限管理
  • 根据不同用户，返回不同菜单
  • 严格控制用户权限
  • 实现思路
    • 动态路由
    • 后端返回的数据格式要求
    • 触发时机
    • 登陆成功的时候触发操作
    • Cookie中存在对应数据，首次进入页面时

一、登录页面

1. login.vue

<template>
  <div style="padding: 20px">
    <el-form :model="form" label-width="120">
      <el-form-item label="用户名">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="form.password" type="password"></el-input>
      </el-form-item>
      <el-form-item align="center">
        <el-button type="primary" @click="login">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    login() {
      this.$http.post('api/permission/getMenu', this.form).then(res => {
        res = res.data
        if (res.code === 20000) {
          //避免二次登陆
          this.$store.commit('clearMenu')
          //传菜单
          this.$store.commit('setMenu', res.data.menu)
          //生成路由
          this.$store.commit('addMenu', this.$router)
          this.$router.push({ name: 'home' })
        } else {
          this.$message.warning(res.data.message)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form {
  width: 50%;
  margin: auto;
  padding: 45px;
  height: 450px;
  background-color: #fff;
}
</style>

2.路由

    {
      path:"/login",
      name:'login',
      component: ()=> import('@/views/Login/Login.vue')
    }

二、动态返回菜单

• 更改路由表
  • 根据是否需要权限的路由分类
• vuex里补充mutation
  • 保存菜单
  • 动态添加菜单
• 生成路由的时机
  • 登录时
  • 刷新时
• 点击退出时，清除cookie后，刷新下页面

---

1. 侧边栏 commonAside.vue

   
   image.png

2.routes index,js只留下无需权限的路由

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path:"/login",
      name:'login',
      component: ()=> import('@/views/Login/Login.vue')
    }
  ]
})

3.操作cookie包，js-cookie

4.tab.js

import Cookie from 'js-cookie'
export default{
    state:{
        //侧栏收缩
        isCollapse:false,
        menu:[],
        currentMenu:null,
        tabList:[
            {
                path:'/',
                name:'home',
                label:'首页',
                icon: 's-home'
            },
        ]
    },
    mutations:{
        //保存菜单
        setMenu(state,val){
            state.menu =val
            //stringify序列化
            Cookie.set('menu',JSON.stringify(val))
        },
        //清除菜单
        clearMenu(state){
            state.menu = []
            Cookie.remove('menu')
        },
        //设置路由
        addMenu(state,router){
            if (!Cookie.get('menu')) {
                return
              }
              //要反序列化
              let menu = JSON.parse(Cookie.get('menu'))
              state.menu = menu
              let currentMenu = [
                {
                  path: '/',
                  component: () => import(`@/views/Main`),
                  children: []
                }
              ]
              console.log(menu)
              menu.forEach(item => {
                if (item.children) {
                  item.children = item.children.map(item => {
                    item.component = () => import(`@/views/${item.url}`)
                    return item
                  })
                  currentMenu[0].children.push(...item.children)
                } else {
                  item.component = () => import(`@/views/${item.url}`)
                  currentMenu[0].children.push(item)
                }
              })
              console.log(currentMenu, 'cur')
              router.addRoutes(currentMenu)
        },
        selectMenu(state, val){
            //过滤掉首页
            if(val.name !== 'home'){
                state.currentMenu = val
                //不让tabs显示重复的东西
                let result = state.tabList.findIndex(item => item.name === val.name)
                result === -1 ? state.tabList.push(val) : ''
            }else{
                state.currentMenu = null
            }
        },
        closeTab(state,val){
            //点击tag上关闭的按钮
            let result = state.tabList.findIndex(item => item.name === val.name)
            state.tabList.splice(result,1)
        },
        collapseMenu(state){
            state.isCollapse = ! state.isCollapse
        }
    },
    actions:{
        
    }
}

5.刷新页面时，在main,js中

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>',
  //刷新时动态路由
  created() {
    store.commit('addMenu',router)
  },
})

三、路由守卫判断（判断登录状态）

• 1.Store下user.js

import Cookie from 'js-cookie'
export default {
  state: {
    token: ''
  },
  mutations: {
    setToken(state, val) {
      state.token = val
      Cookie.set('token', val)
    },
    clearToken(state) {
      state.token = ''
      Cookie.remove('token')
    },
    getToken(state) {
      state.token = Cookie.get('token')
    }
  },
  actions: {}
}

• 2.登录时

  
  image.png

• 3.退出，CommonHeader中

  
  image.png
• main.js中

router.beforeEach((to, from, next) => {
  // 防止刷新后vuex里丢失token
  store.commit('getToken')
  // 防止刷新后vuex里丢失标签列表tagList
  store.commit('getMenu')
  let token = store.state.user.token
  // 过滤登录页，防止死循环
  if (!token && to.name !== 'login') {
    next({ name: 'login' })
  } else {
    next()
  }
})

vue-devtools调试工具

• 组件的封装思路
  • 判断基本参数
    • 哪些写死
    • 哪些是传进来
  • 拓展
    • 自定义事件，判断传出哪些参数
    • 插槽扩展
  • 优化
    • 提高他的适应性
      • vif，velse根据父组件传入的条件来生成对应的模板