在传统的网页中:
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 })
