Background basic template of vuejs2.0 vscode router

Time:2021-5-1

I think it’s a good open source project, so I’ll collect data for detailed analysis to help more people step into the development of background system as soon as possible. In fact, there are two most basic and important things about background projectsAuthority verification and securityAbout vscode is a very popular editor Recently, I don’t want to explain it too much. The following resources explain it in detail

Third party references

  1. Touch your hand, take you to use Vue to make backstage series 4 (vueadmin, a minimalist backstage basic template)
  2. Navigation guard
  3. Request and response interceptor
  4. Me admin template development document
  5. me-admin-template
  6. Me admin template online preview address
  7. SLS admin Vue online preview address
  8. Let me enlighten the online preview address of vueadmin template

Read configuration based on Environment

  • Create a new config folder in the project
  • Add index.js and write export default require (‘. /’+ process.env.NODE_ ENV)
  • according tovue-cliGenerated environment variable (root directory)configThere are three environments: development, testing, production and config. The directory structure is as follows

Vue cli only provides Dev and prod environments by default. But in fact, the real development process may have another sit or stage environment, which is the so-called test environment and pre release environment. So we need to simply modify the code. In fact, it is very simple to set different environment variables

"build:prod": "NODE_ENV=production node build/build.js",
"build:sit": "NODE_ENV=sit node build/build.js",

Then judge by yourself in the code and do whatever you want

var env = process.env.NODE_ENV 
=== 'production' ? config.build.prodEnv : config.build.sitEnv

NPM install registry is recommended= https://registry.npm.taobao.org The installation dependency package uses cnpm install or update. Its package is a link, and there will be various weird bugs


Add request and response [email protected]/_ Extensions / UI, in_ Extend defines the public bullet box and progress bar, and provides the method interface through index

import axios from 'axios'
import _config from '@/_config'
import $ui from '@/_extends/ui'
// import qs from 'qs'

const instance = axios.create({
  baseURL: _ Config.apibaseurl, // base of API_ url
  Timeout: 10000 // request timeout
  // transformRequest: data => qs.stringify(data)
})
//Request interceptor
instance.interceptors.request.use(
  e => {
    e.method = _config.isMockTest ? 'GET' : e.method
    e.url = _config.suffix ? e.url + _config.suffix : e.url
    e.params = e.params || {}
    e.headers = e.headers || {}
    if (localStorage.token) {
      e.headers['Authorization'] = localStorage.token
      //The back end will verify each operation involved in the request and verify whether it has the permission for the operation,
      //Every backstage request, whether it's get or post, will let the front end make the request 
      //The header carries the user's token, and the back end will use the token according to the 
      //Token to verify whether the user has permission to perform the operation.
    }
    return e
  },
  error => ({ status: 0, msg: error.message })
)
//Response interceptor
instance.interceptors.response.use(
  response => {
    const resp = response.data
    if (resp && resp.status === 0 && resp.msg) {
      $ui.pages.warn(resp.msg)
    }
    if (response.status === 200) {
      return resp
    }
    return response
  },
  error => {
    Const err = {status: 0, MSG: 'server exception'}
    if (
      error.message &&
      (error.message.indexOf('403') > -1 || error.message.indexOf('401') > -1)
    ) {
      Err.msg: 'permission verification failed, please login again'
    }
    $ui.pages.warn(err.msg)
    console.log('err' + error) // for debug
    return Promise.reject(err)
  }
)

export default instance

After the user logs in successfully, we will intercept the route in the global hook router.beforeeach to determine whether the token has been obtained. After obtaining the token, we need to obtain the basic information of the user

  • Login: after the user fills in the account number and password, verify whether it is correct to the server. After the verification is passed, the server will return a token. After getting the token (I will store the token in the cookie to ensure that the user’s login status can be remembered after refreshing the page), the front end will pull another user according to the token_ Info interface to get user details (such as user permissions, user name, etc.)
  • Permission verification: obtain the user’s corresponding role through token, dynamically calculate the corresponding routes with permission according to the user’s role, and dynamically mount these routes through router.addroutes
  • Two step verification: in fact, it is binding to the third-party platform after account password verification. After successful login, it will not be redirected to the home page, but the third-party platform login window will pop up

Scroll behavior: the front-end route switches. The new route wants to scroll to the top of the page

import Vue from 'vue'
import Router from 'vue-router'
import { routes } from './routes'
import logic from './logic'
Vue.use(Router)

const router = new Router({
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) return savedPosition
    const position = {}
    if (to.hash) {
      position.selector = to.hash
    }
    position.x = 0
    position.y = 0
    return position
  },
  routes
})
router.beforeEach(logic.beforeEach)
router.afterEach(logic.afterEach)

export default router

Front end and back end control authority

  • The back-end does have permission verification, but its verification is divided according to the business. For example, super editors can publish articles, while internship editors can only edit articles, but not publish them. For the front-end, both super editors and internship editors have permission to enter the article editing page.
  • It’s still being updated…