vue routing security verification

In a traditional web page:

a rear end view of the layer is controlled by the user's request reaches the rear end of the controller, and only when the safe on without the slightest abnormality, only the rear end of the rendering data is completed, the process returns to the front end view

Before and after the end of the separation of the project:

Right view switching layer, transferred to the front-end frame, such as the VUE, using the navigation route to navigate between views of different components , then if authentication is not limited to any secure, in fact, there is a problem, if the user browser different routes manually in the address bar, the same page jump action will take place , in other words, users will be able to enter the sub-page without logging after the originally logged in to view

Realization of ideas

Goal is, to control the routing switch, both to verify permission before any routing jump through verification, allowing the routing of the jump, pass validation, direct users to the login page

Coding

• In the file entry router, a route to each child component, identification, verification judging subsequent to the route will be blocked used, as follows, log marker request is not authenticated, and to request the page layout to be validated ,

Take login, the routing jump occurs after the user requests to access back-end user to verify whether information satisfies the condition , during which time full back-end process to pass information back and the persistent information on the browser , such as the back-end pass over the token, then the following route before jumping only need to verify that there is no token, token or verify the correctness of the page and then decide whether to jump on ok

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

export const constantRouterMap = [
  {
    path: '/login',
     在这里!!!
    meta: {requireAuth: false},
    component: () => import('@/views/login/index'),
    hidden: true
  },
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    name: 'Dashboard',
    hidden: true,
    children: [{
      path: 'dashboard',
      在这里!!!
      meta: {requireAuth: true},
      component: () => import('@/views/dashboard/index')
    }]
  },

• Unify interception before routing the jump, custom permission.js, and entrance main.js throughout the project, introducing the js file

import router from './router'
import store from './store'
import {Message} from 'element-ui'

router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) { // 查看请求是否需要认证
    if (store.getters.loginstatus) { // 有权限,继续往下跳转
      next();
      return
    }else{
      Message.error("请您先登录");
      // 不存在role信息就是去登录页
      next('/login');
      return
    }
  } else { // 不需要认证的全部直接放行
    next();
    return
  }
});


router.afterEach(() => {
 // todo 
})