The background management of quasar

Official website of quasar

quasar-admin

Project introduction

Background management system based on quasar

#Role menu permission: after successful login, get the menu according to the user information
#Button permission control: return permission, command control
#Menu data structure
[
  {
    icon: 'feedback',
    Label: 'store management',
    path: '/storeInfo',
    BTNs: ['btn add ','btn delete'] #button permissions are inconsistent with the following simulation information, and the idea is the same
  }
]

Development code fragment description

After reading the official documents, we recommend using yarn 
so do it
ready ~~

# Node.js >=10 is required.

#Global install yarn
npm install -g yarn

#Global installation of quasar, please see the bottom note
yarn global add @quasar/cli


#Project start up execution document
quasar.config.js
boot: [
    //The file name in the boot folder of the file to execute
  'axios',
  'permission'
]

build: {
    Port: 8083, // port 8083 below
    env: {
            API: ctx.dev
              ? http://localhost : 8080 / backend '// the suffix is the same as the following proxy
              : 'http://www.xxxxx.cn/'
          },
}
devServer: {
    proxy: {
            '/backend': {
              target: 'http://testapi',
              changeOrigin: true,
              pathRewrite: {
                '^/backend': '/'
              }
            }
          },
}

//Boot folder
axios.js     //Request settings
import Vue from 'vue'
import axios from 'axios'
import * as authService from '../utils/auth'
import { Loading } from 'quasar'

// Add a request interceptor process.env.API '/backend'
const axiosInstance = axios.create({
  baseURL: process.env.API,
  timeout: 10000,
  withCredentials: true
})

axiosInstance.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'
//Request interception
axiosInstance.interceptors.request.use(
  config => {
    Loading.show({
      // spinner: QSpinnerGears,
      delay: 500, // ms
      message: 'Some message',
      messageColor: 'blue',
      Spinnersize: 250, // pixels
      spinnerColor: 'white',
      customClass: 'bg-primary'
    })
    console.log('info request token:' + authService.getToken())
    if (authService.getToken()) {
      config.headers.Authorization = 'Bearer ' + authService.getToken()
    } else {
      config.headers.Authorization = ''
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

//Response interception
axiosInstance.interceptors.response.use(
  response => {
    Loading.hide()
    return response.data
  },
  error => {
    return Promise.reject(error)
  }
)

Vue.prototype.$axios = axiosInstance

export { axiosInstance }

permission.js      //Button permission control
export default ({ app, router, store, Vue }) => {
  Vue.directive('permission', {
    bind: function (el, binding, vnode) {
      // localStorage.setItem('isAdmin', 0)
      // localStorage.setItem('permission', ['function_edit', 'function_add'])
      // console.log(localStorage.permission, el, binding, vnode)
      const needPermissions = binding.value
      const permissions = JSON.parse(localStorage.getItem('permission'))
      // const permissions = ['function_edit', 'function_add']
      const isAdmin = localStorage.getItem('isAdmin')
      const hasPermission = permissions.some(s => {
        return needPermissions.indexOf(s) > -1
      })
      console.log(hasPermission, isAdmin)
      if (!hasPermission) {
        el.style.display = 'none'
      }
    }
  })
}

//Button usage control
<q-btn v-permission="['function_edit']" small round push glossy dense icon="edit" color="primary" @click="editFunction(props.value)"></q-btn>
<q-btn v-permission="['function_del']" small round push glossy dense icon="delete" color="red" @click="delFunction(props.value)"></q-btn>

LeftMenuBar.vue      #Simulation menu permission control

File directory description

├─.quasar
├─.vscode
├─dist
│  ├─electron
│  │  └─UnPackaged
│  └─spa
│      ├─css
│      ├─fonts
│      ├─icons
│      └─js
├─public
│  └─icons
├─src
│  ├─api
│  │  └─user
│  ├─assets
│  ├─boot
└ - Axios // request settings
The command control button
│  ├─components
└ - leftmenubar // left menu
└ - leftsubmenu bar // recursive submenu
│  ├─css
│  ├─data     
To simulate menu data  
│├ - layouts // layout
└ - admin // Administrator
The seller // merchant
│  ├─pages
The admin // administrator page
│  │  │  ├─commissionManagement
│  │  │  ├─goodsManagement
│  │  │  ├─orderManagement
│  │  │  └─storeManagement
│  │  │      └─component
│  │  ├─other
The seller // merchant page
│  │      ├─commissionManagement
│  │      ├─goodsManagement
│  │      ├─orderManagement
│  │      └─storeManagement
│  │          └─component
│  ├─plugins
│  ├─router
│  │  └─index      // 
To configure routes // route menu
│  ├─store
│  │  └─modules
│  └─utils
└─src-electron
    ├─icons
    └─main-process

Operation effect

1. Assume input address’ localhost:8083 ‘simulate the successful login into the merchant page

1. Assume input address’ localhost:8083/#/admin ‘simulate the login and successfully enter the administrator page

/*Precautions*/
1. Horn installs quasar. If the quasar command is invalid, configure environment variables
2. Yarn global bin view the installation path of yarn // C:: (users / Dell / appdata / local / yarn / bin)

//Export path = $(yarn global bin): $path "// configure yarn configuration environment variables
3. VIM ~ /. Bashrc execute the command to open the file and input 4
4. export PATH="$(C:\Users\dell\AppData\Local\Yarn\bin):$PATH"

//Configuration of environment variables does not take effect after computer restart

//Version problem remove installation first
https://quasar.dev/start/upgrade-guide
There is a problem with missing. Babelrc file... Which makes it unable to run
yarn global add @quasar/cli

https://github.com/msliuyang/…