分类
解决方案

路由控制解决方案

权限,路由

lu you kong zhi liu cheng tu 647x1024 - 路由控制解决方案
路由控制流程图
deng lu yi ge you quan xian de ye mian 647x1024 - 路由控制解决方案
登录一个有权限的页面

q1: 在哪里进行路由拦截?

每次路由跳转之前进行拦截

// @/router/index.js
import Vue from 'vue';
import Router from 'vue-router';
// 页面路由
import routes from './routes';
// 路由拦截函数
import { routerBeforeEachFunc } from '@/config/interceptors/router';

Vue.use(Router);
const routerInstance = new Router({
  routes,
});
// 注入拦截器
routerInstance.beforeEach(routerBeforeEachFunc);
export default routerInstance;

main.js

// 获取@/router/index.js的routerInstance
import router from './router';
new Vue({
  router,
  render: h => h(App),
}).$mount('#app');

q2:是否需要控制这个判断有必要吗?

可有可无,这是作为一个框架来思考,或许某些项目不需要对路由进行控制,也没有菜单按钮权限管理等需求,就这可设置配置项为不需要控制路由。

q3:检查是否处理过权限与路由这个判断会以怎样的方式触发两种情况?

这个判断是以store中的一个属性值来判断的,默认值为false,因此会有这两种情况:1.已经登录过,在路由之间进行跳转。2.曾经登录过。重新打开浏览器,输入路由地址。

q4:如何存储token?

localStorage

q5:在有token的情况下,如何会因为异常跳转到login页?

调用用户接口失败或调动菜单接口失败

q6:在login页,怎样判断是重定向的路由还是就是在login的路由?

const redirect = decodeURIComponent(from.query.redirect || to.path);

q7:是否有权限函数做了什么?

我们在vue-router中定义了一些路由,某些路由需要权限的判定(页面权限,按钮权限),当拦截的路由符合权限判定的条件时,判断它是否有页面权限和按钮权限,而获取菜单权限时同时会获取到按钮权限,我们通过按钮权限进行一一比对得出该页面,该用户最终的权限。