vue的路由安全验证

在传统的网页中:

view层是由后端控制的,用户的请求到达后端的控制器中,只有当安安全全没有丝毫异常的情况下,后端才会将完成数据的渲染,返回给前端视图

前后端分离的项目:

view层的切换权,转交给了前端框架,如vue, 使用路由导航进行不同视图组件之间的导航, 这时如果不做任何的安全的验证限制, 其实是有问题的,如果用户在浏览器的地址栏中手动的不同的路由,同样页面会发生跳转的动作, 换句话说,用户不用登录就能进入本来是该登录后才能查看的子页面

实现思路

目标就是, 控制路由切换,在任何路由跳转之前都进行权限的验证,通过验证,允许路由的跳转,通不过验证,将用户导向登录页面

编码实现

• 在路由器的入口文件中,给每一个路由子组件添加标识,给后续验证时判断该路由会不会被拦截使用, 如下,标记登录的请求是不需要验证的,去layout页面的请求需要进行验证,

就拿登录来说,路由的跳转发生在用户请求登录,后端验证用户的信息是否满足条件之后, 在这期间完全有时间处理后端传递回来的信息,并且将信息持久化在浏览器上,比如后端传递过来的 token, 那下面在路由跳转之前只需要验证有没有token,或者验证token的正确性再决定是否进行页面的跳转就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')
    }]
  },

• 在路由跳转之前做统一的拦截, 自定义permission.js, 并在整个项目中的入口main.js中,引入这个js文件

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
})