This is the 21st day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Introduction to Identity Authentication

  • 🤩 Avoid “doors without walls” in order to make sense of the login feature
    • You should generate a token (token) for the user after successful login and save the token
    • The token is validated whenever the user accesses any page (component) that needs to be logged in
    • thusidentifyWhether a user logs in or has the right to access corresponding functions
      • Successful, access component
      • Failed, prompting

Vuex

  • usevueOfficial status management toolvuex, realize theloginData in a component is accessed by any other component
  • 🤩vuexUsed to uniformly store state (data) that needs to be shared among multiple components, state can be manipulated by any component, making component communication a breeze

Used in the projectvuex

  • The installationnpm i vuex -S
  • Use: createvuexThe instancestore(container)
// store/index.js
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
// Create a vuEX container instance to store the state that needs to be shared among components
const store = new Vuex.store({
  state: {
    count: 0}})export default store
Copy the code
  • In the rootvueIntroduce into an instancevuexAs a plug-in
new Vue ({
  render: h= > h(App),
  store
}).$mount("#app")
Copy the code
  • throughvue.use()The introduction ofVuexLater,VuexFunctionality is injected into all child components under the root instance and can be passed$storeAccessing internal functions

state

  • In the containerstateUsed to store data that needs to be shared between components
  • The characteristics of
    • The data in the container can be accessed by any component
    • The data in the container is reactive data
    export default new Vuex.store({
  state: {
    user: 'zs'
  },
  // The only way to submit state
  mutations: {},// Asynchronous operation
  actions: {},/ / module
  modules: {}})Copy the code
  • Pass through the componentThis $store. State. The state nameaccess
async onSubmit () {
  console.log(this.$store.state.user)
}
Copy the code

Mutation

  • To be modifiedVuexIn thestate, must be defined in advanceMutationFunction to commit when needed
  • 🤩MutationreceivestateObject is the first parameter and is used for operationsstateIn the data
  • Code demo
export default new Vuex.store({
  state: {
    age: 18
  },
  mutations: {
    // step 1: define the mutation function
    setAge (state) {
      state.age++
    }
  }
})
Copy the code
  • Need to commit (modifystateWhen executing)
async onSubmit () {
  // Prints age
  console.log(this.$store.state.age)
  // Step 2: commit mutation and perform the operation
  this.$store.commit('setAge')
  console.log(this.$store.state.age)
}
Copy the code
  • MutationAlso receiveSubmit payloadAs a second parameter, it is often modified depending on context datastateThe use of
// store/index.js
mutations: {
  setAge (state,payload) {
    state.age = payload
  }
}

/ / components
async onSubmit() {
  this.$store.commit('setAge'.23)}Copy the code

Pay attention to the point

  • MutationThe setting mode is enabledVuexState changes are traceable and easy to maintain.Vue DevToolsProvides forVuexMore advanced debugging methodsTime Travel

  • 🤩MutationIt must beSynchronization function
    • becauseDevToolsprovidesMutationTo ensure the normal function of the log function, do not have asynchronous tasksDevToolsWill never knowMutationThe exact call order of.

Action

  • ActionSimilar to themutationDifference is that
    • ActionIs submittedMutation, rather than directly changing the state
    • ActionCan contain any asynchronous operation
  • 🤩ActionThe function takes an andstoreInstance with the same methods and attributescontextObject, so you can callcontext.commitTo submit aMutation
// store/index.js
mutations: {
  setAge (state,payload) {
    // Change the status
    state.age = payload
  }
},
actions: {
  Context and store power have the same methods and attributes
  addAction (context,payload) {
    setTimeout (function () {
      / / submit mutation
      context.commit('setAge',payload.age)
    }, payload.time)
  }
}
Copy the code
  • 🤩Actionthroughthis.$store.dispatchMethods the trigger
// login/index.vue
async onSubmit() {
  this.$store.dispatch('addAction', {age: 10.time: 1000})}Copy the code

Data persistence

  • 🤩 stores the status locallylocalStoragerightuserData persistence prevents status loss after page refreshing
state: {
  age: JSON.parse(window.localStorage.getItem('user') | |null)},mutations: {
  setAge (state,payload) {
    // Convert to object for saving
    state.age = JSON.parse(payload)
    // Persist data through local storage
    window.localStorage.setItem('user',payload)
  }
}
Copy the code

Verify page access permissions

  • 🤩 Login status needs to be verified when routing jumps. Use Vue Router navigator beforeEach to detect login status when tasks are triggered

  • 🤩 If login status is required for only some pages, you can use the routing meta information function of the Vue Router to set the login status

    • meta: Saves custom data related to routes
    • requiresAuth: Whether certification is required,trueRequires authentication
    // router/index.js 
// Routing rules
　const routes = [
    {
      path: '/course'.name: 'course'.component: () = > import(/* webpackChunkName: 'course' */'@/views/course/index.vue'),
      // Authenticate the route that requires authentication
      meta: { requiresAuth: true}}]Copy the code

  • Check whether the route to requires login in the navguard

// Set VueRouter's front guard to verify route jump permission
router.beforeEach((to, from, next) = > {
  // Official example
  if (to.matched.some(record= > record.meta.requiresAuth)) {
    // If the identity information can be retrieved from the store container in vuEX, authentication is successful
    if(! store.state.user) {console.log('Not logged in')
      next({
        // Name of the route to jump to
        name: 'login'})}else {
      // Already logged in
      next()
    }
  } else {
    // Do not authenticate
    next() // Be sure to call next()}})Copy the code

Optimized the route meta information

  • If all child routes of a parent route need to log in, you can directly configure the parent routemetaProcessing (unified processing)
  • Because child routing requests pass through the parent route, it is easier to configure login detection for the parent route directly, which is suitable for the situation where all child routes need to log in

After login, the page of last visit is displayed

  • Should jump to each/loginRecorded whenThe currenttoDestination routing informationThrough theHop routingqueryattributeset
if(! store.state.user) { next({// Name of the route to jump to
    name: 'login'.// Redirect is a user-defined name
    query: { redirect: to.fullPath }
  })
}
Copy the code