基于 vue3 利用 vuex 状态控制路由和按钮的权限 - 登录获取权限控制（3）

vue3-router-permission

基于 vue3 利用 vuex 状态控制路由和按钮的权限 - 登录获取权限控制（3）

gitee: vue3-router-permission

修改Login.vue

登录时 获取到路由权限

vuex 存储用户权限

dynamicRouter 动态添加路由

<template>
  <div class='index_container'>
    <h2>vue3-vuex-permission</h2>
    <h3>Login</h3>
    <el-button type="primary"
               @click="handleAdmin">admin登录</el-button>
    <el-button type="primary"
               @click="handleTest">test登录</el-button>
  </div>
</template>

<script lang='ts'  setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()

import { dynamicRouter } from '../router/index'
import { useStore } from 'vuex'
const store = useStore()

import '../mock/index'
import mockApi from '../api/mockApi'
const state = reactive({})


const handleAdmin = () => {
  mockApi
    .adminLogin()
    .then((res) => {
      console.log(res)
      let info = res.data
      console.log(info)

      store.commit('account/setUserInfo', info.userInfo)
      store.commit('account/setToken', info.token)
      store.commit('account/setMenuList', info.menuList)
      store.commit('account/setPermission', info.permission)
      // 动态添加路由
      dynamicRouter()
      // 跳转到主页
      router.push('/home')
    })
    .catch(function (error) {
      console.log(error)
    })
}
const handleTest = () => {
  mockApi
    .testLogin()
    .then((res) => {
      console.log(res)
      let info = res.data
      console.log(info)

      store.commit('account/setUserInfo', info.userInfo)
      store.commit('account/setToken', info.token)
      store.commit('account/setMenuList', info.menuList)
      store.commit('account/setPermission', info.permission)
      // 动态添加路由
      dynamicRouter()
      // 跳转到主页
      router.push('/home')
    })
    .catch(function (error) {
      console.log(error)
    })
}
</script>

添加界面布局文件

    - src
        - views
            - layout
                - Header.vue
                - Index.vue
                - Sidemenu.vue

Header.vue

<template>
  <div class='index_container'>
    <h3>vue3-vuex-permission</h3>
    <div class="user_info">
      <span> 用户：{{state.userInfo.username}}</span>
      <el-button @click="handleExit">退出</el-button>
    </div>
  </div>
</template>

<script lang='ts'  setup>
import { ref, reactive, onMounted } from 'vue'

import db from '../../utils/localDb'
import { useStore, mapState } from 'vuex'
const store = useStore()
import { useRouter } from 'vue-router'
const router = useRouter()

const state = reactive({
  userInfo: store.state.account.userInfo,
})

const handleExit = () => {
  store.commit('account/setUserInfo', undefined)
  store.commit('account/setMenuList', undefined)
  store.commit('account/setToken', undefined)
  store.commit('account/setPermission', undefined)
  db.clear()

  router.push('/login')
}
</script>
<style scoped>
.index_container {
  display: flex;
  justify-content: space-between;
}
.user_info {
  line-height: 50px;
}
.user_info span {
  margin: 0 10px;
}
</style>

Sidemenu.vue

<template>
  <div>
    <el-menu mode="vertical" unique-opened  :router="true"  v-for="item in menuList[0].children" :key="item.id">
        <el-menu-item :index="item.path">{{item.name}}</el-menu-item>
    </el-menu>
  </div>
</template>


<script>
import { mapState } from 'vuex';

export default {
  name: "SideMenu",
  data() {
    return {
    }
  },
  computed: {
    ...mapState({
      menuList: state => state.account.menuList,
    })
  },
  methods: {
  }
}
</script>

Index.vue

<template>
  <div class="common-layout">
    <el-container>
      <el-header class="common-header">
        <HeaderBar></HeaderBar>
      </el-header>
      <el-container class="layout_container">
        <el-aside width="200px"
                  class="common-aside">
          <SideMenu></SideMenu>
        </el-aside>
        <el-container>
          <el-main>
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import SideMenu from './Sidemenu.vue'
import HeaderBar from './Header.vue'
</script>

修改 路由

router > index.ts
删除这部分内容

  {
    path: '/home',
    name: 'Home',
    component: () => import('../views/Home.vue'),
  },
  {
    path: '/user',
    name: 'User',
    component: () => import('../views/User.vue'),
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue'),
  },

修改main.ts 添加动态路由，防止刷新失去路由

import { dynamicRouter } from './router'
dynamicRouter()