基于 vue3 利用 vuex 状态控制路由和按钮的权限 - 路由权限（2）

vue3-router-permission

基于 vue3 利用 vuex 状态控制路由和按钮的权限 - 路由权限（2）

gitee: vue3-router-permission

新建本地存储

src -> utils -> localDb.js

const localdb = {
  get(key) {
    return JSON.parse(localStorage.getItem(key))
  },
  set(key, value) {
    localStorage.setItem(key, JSON.stringify(value))
  },
  remove(key) {
    localStorage.removeItem(key)
  },
  clear() {
    localStorage.clear()
  },
}

export default localdb

新建 vuex 状态管理

新建文件夹 和 文件

 - src
    - store
        -  modules
            -  account.js
        -  index.ts

account.ts

import localDb from '../../utils/localDb'

export default {
  namespaced: true,
  state: {
    userInfo: localDb.get('userInfo') || {},
    token: localDb.get('token'),
    menuList: localDb.get('menuList') || [],
    permission: localDb.get('permission') || [],
  },
  mutations: {
    setUserInfo(state, value) {
      localDb.set('userInfo', value)
      state.userInfo = value
    },
    setToken(state, value) {
      localDb.set('token', value)
      state.token = value
    },
    setMenuList(state, value) {
      localDb.set('menuList', value)
      state.menuList = value
    },
    setPermission(state, value) {
      localDb.set('permission', value)
      state.permission = value
    },
  },
}

index.ts

import { createStore } from 'vuex'
import account from './modules/account'

export default createStore({
  modules: {
    account,
  },
})

main.ts 中导入

...
import store from './store'
...
app.use(ElementPlus).use(router).use(store).mount('#app')

构造 Mock 数据

新建 mock 文件夹 再新建 index.js mock > index.js

// 引入mockjs
import Mock from 'mockjs'

Mock.mock('/api/admin', 'get', () => {
  return {
    code: 200,
    data: {
      userInfo: {
        username: 'root',
      },
      token: '123456',
      permission: ['view', 'delete', 'add'],
      menuList: [
        {
          path: '/',
          redirect: '/home',
          component: 'layout/index',
          children: [
            {
              name: '首页',
              path: '/home',
              component: 'Home',
            },
            {
              name: '按钮权限',
              path: '/user',
              component: 'User',
            },
            {
              name: '关于',
              path: '/about',
              component: 'About',
            },
          ],
        },
      ],
    },
    msg: '登录成功',
  }
})
Mock.mock('/api/test', 'get', () => {
  return {
    code: 200,
    data: {
      userInfo: {
        username: 'test',
      },
      token: '789456',
      permission: ['view', 'add'],
      menuList: [
        {
          path: '/',
          redirect: '/home',
          component: 'layout/index',
          children: [
            {
              name: '首页',
              path: '/home',
              component: 'Home',
            },
            {
              name: '按钮权限',
              path: '/user',
              component: 'User',
            },
          ],
        },
      ],
    },
    msg: '登录成功',
  }
})

新建请求

src -> utils -> request.js

import axios from 'axios'
import { ElMessage ,ElLoading} from 'element-plus'

let request = axios.create({
  baseURL: '',
  timeout: 10000,
})

let loadingInstance;

// 拦截器的添加
request.interceptors.request.use(
  (config) => {
    loadingInstance = ElLoading.service('加载中')
    return config
  },
  (err) => {
    loadingInstance?.close()
    ElMessage.error('网络异常')
    request
    return Promise.reject(err)
  },
)

//响应拦截器
request.interceptors.response.use(
  (res) => {
    loadingInstance?.close()
    return res.data
  },
  (err) => {
    loadingInstance?.close()
    ElMessage.error('请求失败')
    return Promise.reject(err)
  },
)
export default request

新建 API 接口

src -> api -> mockApi.js

import request from './request.js'
export default {
  //用户列表
  adminLogin() {
    return request({
      url: `/api/admin`,
      method: 'get',
    })
  },
  //用户列表
  testLogin() {
    return request({
      url: `/api/test`,
      method: 'get',
    })
  },
}