First, preliminary preparation

1. Create the auth.js script

Function:Used toManage the tokens of login users.

** Token description: ** A token used by a client to request background services in a separate development mode. It is a string in ciphertext. After a user requests login, the background returns it to the foreground.

The following figure shows the script file directory

** code: **

import Cookies from 'js-cookie'const TokenKey = 'Admin-Token'export function getToken() {  return Cookies.get(TokenKey)}export function setToken(token) {  return Cookies.set(TokenKey, token)}export function removeToken() {  return Cookies.remove(TokenKey)}
Copy the code

Note: * * * *

** JS-cookie :** is a JS API for processing cookies. The above code only encapsulates part of the methods that we can use in this project. You can search for them if you further study

Install: NPM install js-cookie –save

2. Create the settings.js script

** stores various configuration variables in a Web project. In this tutorial, we will only use the title of a Web page, so we will only configure this item.

The following figure shows the script file directory

Code:

Module. exports = {title: 'admin '}Copy the code

3. Create the get-page-title.js script

Function: Assigns or calls title in settings.js

The following figure shows the script file directory

Code:

import defaultSettings from '@/settings'const title = defaultSettings.title || 'admintitile'export default function getPageTitle(pageTitle) {  if (pageTitle) {    return pageTitle+"-"+title  }  return title}
Copy the code

Two, modular

Many students would ask me in private why the code of the three files mentioned above should be divided into independent scripts when it could be put together.

In fact, this is a programming idea driven by a development habit, this idea is to describe the following idea of modularization

Official definition: from the point of view of project structure: make developers have clearer thinking, improve the maintainability of the project. From the perspective of code structure: it can improve the dependency management, readability and reuse of code structure. To learn more about the official gao Da Shang, you can do it on Baidu (haha ~ ~ ~)

Personal understanding (do not like spray, welcome to correct) :

Classify different business functions into separate modules. This is not only suitable for programming project structure combing, code writing, framework research and development. Examples of modular ideas abound in life.

Students will classify the difficulty of the questions and then answer them

Companies will classify departments and then manage them

Your wife will sort your SINS and efficiently call back when you don’t listen.

The last quote is that civilization is not built by machines but by ideas. — Leo Tolstoy Good thinking creates efficient thinking patterns that make us more productive

Because the article takes up too much space, the main course will be introduced in the next article. Brothers, sharpening knives does not mistake firewood, boys to be patient oh ~ ~ ~

Read on: VUE Entry Route Guard Implementation Permission Validation (5-2)