【转】 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
})