Login permission is the verification of the user

Application scenarios

When you need to log in to assess whether certain pages are displayed

Implementation approach

Router. beforeEach coordinates with login credential token, where router.beforeEach determines whether the page is displayed and token determines whether to log in.

Implementation method

When configuring a routing rule, add a meta attribute to the routing rule configuration object for which the page can be displayed only after login. If the need_login attribute in the route information is true or false (indicating that the page can be accessed without login), the page is directly displayed. If it is true (this page can be accessed only after login) : Then check whether there is a login certificate token in the front end. If there is a login token, the page is directly redirected to the corresponding page. If no, the login page is displayed.

The key code is as follows

router->index.js

 // Configure routing rules
const router = new Router({
  routes: [{path: '/login'.// Login page
         name: 'Login'.component: Login,
      },
      {
         path:"/tourist".// Visitor page
         name:" tourist".component: Tourist, 
      },
      {
         path:"/myCenter".// User page
         name:"MyCenter".component: MyCenter, 
         meta: {need_login:true // Login is required}}});// Register a global front-guard with router.beforeEach to determine whether the user is logged in
 router.beforeEach((to, from, next) = > {
      const { need_login = false } = to.meta;
      const { token } = store.state; // Obtain the token from vuex
      if(need_login && ! token) {// Jump to the login page if the user is not logged in
        const next_page = to.name;
        next({
          name: 'Login'.params: { 
              redirect_page: next_page,// The route name of the page to be accessed is passed as a parameter to the login page}}); }else {
        // No login is requirednext(); }});Copy the code

login.vue

// Get user information
// The token returned by the background is stored to localStorage through VUEX after the successful login callback
    login () {
      let _this = this;
      if (this.loginForm.username === ' ' || this.loginForm.password === ' ') {
          alert('Account number or password cannot be empty');
      } else {
            this.axios({
              method: 'post'.url: '/user/login'.data: _this.loginForm
            }).then(res= > {
          console.log(res.data);
          _this.userToken = 'Bearer ' + res.data.data.body.token;
          // Save the user token to vuex
          _this.changeLogin({ Authorization: _this.userToken });
          _this.$router.push('/home');
          alert('Successful landing');
        }).catch(error= > {
          alert('Wrong account or password');
          console.log(error); }); }}Copy the code

store->index.js

const store = new Vuex.Store({
  state: {
    / / store token
    Authorization: localStorage.getItem('Authorization')?localStorage.getItem('Authorization') : ' '
  },
  mutations: {
    // Modify the token and store the token to localStorage
    changeLogin (state, user) {
      state.Authorization = user.Authorization;
      localStorage.setItem('Authorization', user.Authorization); }}});Copy the code