• Scene description

Suppose there is a scenario in which user privileges do not need to be verified for home page access, because the user is not logged in and cannot determine his or her privileges. When accessing the management background page, if the user does not login and jumps to the login page automatically, the effect is similar to that of the background interceptor.

In the Vue project, how can we achieve this effect? We can use the navigation and guard function provided by vue-router.

• Global Guard

The navigation guard of vue-router can be global or at a routing level. Next, we will talk about how to realize the overall navigation guard.

1. First of all, we need to store the logo location when the user logs in (omitting the code of the login process, only showing the logo storage here).

    // Log in successfully and return user information
    var userinfo = response.data.result;
    userinfo.isSignin = true;// Is the user logged in?
    that.$store.dispatch("setUserInfo", userinfo);

1. Next, we need to indicate in the routing table which routes need to be logged in to access and which do not need to be logged in. In / router/index.js, we can see the difference between the background management module and the home page module is that the background management module has a meta: {login_required: true}, which is the metadata of routing, and can set some private attributes of routing. This login_required is a page that identifies that only the logged-in user can access the management module.

export default new Router({
  routes: [
    // Home Page Module
    {
      path: '/', component: resolve => {require(['../components/home/Home'], resolve)},
      children: [
        {path: '/', name: 'index', component:  resolve => {require(['../components/home/Index'], resolve)},},
        {path: 'product1', name: 'product1', component:  resolve => {require(['../components/home/Product1'], resolve)},},
        {path: 'product2', name: 'product2', component: resolve => {require(['../components/home/Product2'], resolve)},},
        {path: 'contact', name: 'contact', component: resolve => {require(['../components/home/Contact'], resolve)},},
        // Login module
        {path: 'signin', name: 'signin', component: resolve => {require(['../components/sign/Signin'], resolve)},},
        {path: 'signup', name: 'signup', component: resolve => {require(['../components/sign/Signup'], resolve)},},
        {path: 'forgetpwd', name: 'forgetpwd', component: resolve => {require(['../components/sign/ForgetPwd'], resolve)},},
        {path: 'resetpwd', name: 'resetpwd', component: resolve => {require(['../components/sign/ResetPwd'], resolve)},}
      ]
    },
    //Background management module
    {
      path: '/manage',meta: {login_required: true}, name: 'manage', component: resolve => {require(['../components/manage/Manage'], resolve)},
     
    }
  ]
});

1. After storing the landing logo and identifying the route to be logged in, we need to make a global interception judgment. If the current landing logo is false and the route to be accessed is to be logged in, then we refuse access and jump directly to the login page. Implemented in main.js as follows:

//Authentication of privileges
router.beforeEach((to, from, next) => {
  //Check whether landing
  let isSignin = localStorage.getItem("isSignin");
  let matched = to.matched.some((item) => {
    return item.meta.login_required;
  });
  if(isSignin == 'false' && matched){
    next('/signin');
  }else{
    next();
  }

});

1. Next, you can verify whether direct access / manage ment will jump to the / signin page.

• Component level guard

For example, we need to give a reminder when we are going to other pages in one component that the content of the current page will be lost. This effect can also be achieved through vue-router

In a component:

 // When leaving the page
 // At the same level as methodes
beforeRouteLeave(to,from,next) {
  var that = this;
  let matched = to.matched.some((item) => {
    return item.meta.case_not_need_confirm;
  });
  if(matched || that.notNeedConfirm){//Current pages or some pages do not need reminders
    next();
  }else{
    that.$confirm(that.$t('promotInfo.closePromot'), that.$t('promotInfo.prompt'), {
      confirmButtonText: that.$t('btnName.submitBtn'),
      cancelButtonText: that.$t('btnName.cancelBtn'),
      type: 'warning',
      center: true
    }).then(() => {
      next();
    });
  }
}

On the way without reminder, we can add the following metadata to indicate that no reminder is needed to access this page.

 meta: {case_not_need_confirm: true}

• summary

Through the above two examples, the author demonstrates the function of navigation guard at the global and component level. This effect eventually corresponds to the background filter, which is very helpful to the security and availability of the system.