Because the back-end interface of the project is deployed on top of the Easy-Mock, the interface will occasionally fail. If there is a login network error, the Easy-Mock is dead and will be fine after a while (thanks easy-Mock developers and maintainers).

Borrow a picture of big guy, infringement stand delete

One line of code is a bit of an overstatement, thanks to Vue for providing a perfect API that allows us to implement functionality with a minimum of code, which I came up with myself, so I’m sure there are some poorly thought out issues. If you have any questions, please comment on 🤣

preface

Last week, nuggets released another idea for Vue backend authentication, the implementation and optimization of dynamic routing, and some questions were raised in the comments

  1. How to do VUE sso

    I have written a full stack project before, vUE + KOA2 + JWT to achieve single sign-on + Todolist add, delete and check, there is a project introduction, interested in the words can see 😄

  2. What if you need a lot of button-level authentication

    The topic of this article, and this requirement is very common in the background, is that in the same administrative form, certain buttons are not allowed to be operated by people who do not have privileges, so you need to granulate the privileges of the buttons

The latest case has been updated to Github, welcome to experience ~~ vue-Element-Asynclogin, your start is my motivation!

Implementation approach

  • Buttons are controlled according to the permission list returned by the backend
  • It needs to be maintainable and less code to implement the functionality

The realization of v – the if

Obviously this could be accomplished using v-if, a public validation function for the privilege sequence, and then used in V-IF, but there is a downside to this

Every page that requires validation permissions needs to import files and make code calls to use V-if in the page

Example code:

src\utils\index.js

import store from '.. /store'

@param {String} e */
export function permit(e) {
    return store.getters.roles.includes(e)
}

Copy the code

src\views\dashboard\index.vue

<el-button v-if="basePermit('edit')" type="warning"> Modify </el-button> <el-button v-if="basePermit('view')" Type ="success"> View </el-button> import {permit} from '.. /.. /utils/index.js' // ... methods: { basePermit(e) { return permit(e) } }Copy the code

Although this can be achieved, but very troublesome, a lot of pages need, the code is tedious, this is not what we want

Implementation of custom instructions

With permission granulation, we can feel that the functionality is simple and many pages will use it, so why not do it in a globally accessible way?

Use custom instructions to do this, and the code will be surprisingly simple

  1. Make the permission list request when your page is refreshed
  2. Store to vuex or browser
  3. Create custom directives

src\utils\directive.js

import Vue from 'vue'
import store from '.. /store'
/** * @export custom directive */
export function directive() {
  Vue.directive('permit', {bind(el, binding) {// One ternary operator will do! store.getters.roles.includes(binding.value) ? el.parentNode.removeChild(el) : {} } }) }Copy the code
  1. Need to introducesrc\main.js
import { directive } from './utils/directive'
/ /...
directive()
/ /...
Copy the code

How do we use custom directives for button level permissions in a project?

Very simple

<el-button v-permit="'add'" type="primary"> Add </el-button> <el-button v-permit="'delete'" type="danger"> Delete </el-button> <el-button v-permit="'edit'" type="warning"> </el-button> <el-button v-permit="'view'" type="success"> view </el-button>Copy the code

A matter of ~ ~ ~ ~

The demo link is at the bottom of the article

Project screenshots

Did you learn it 😄

Project address vue-element-Asynclogin, if it helps you, please don’t skimp on your start~~😄