vue2路由拦截
这是一个剪刀的路由拦截
router分位两个文件，一个是路由统一配置，一个是具体的路由信息
1路由拦截
import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './index.config'
import { routerList } from '@/common/js/url-white-list'
Vue.use(VueRouter)
const router = new VueRouter({
mode: 'hash',
// mode: 'history',
base: __dirname,
routes,
//在顶部点击当前路由菜单回到顶部
scrollBehavior() {
return {
x: 0,
y: 0
}
/* 跳转页面返回顶部 */
}
})
router.beforeEach((to, from, next) => { //简单的判断
// 百度统计，上报数据
if (window._hmt) {
if (to.path) {
// eslint-disable-next-line
window._hmt.push(['_trackPageview', '/#' + to.fullPath]);
}
}
let roleType = window.localStorage.getItem('roleType'); //用户角色
// let url = window.location.hash ? window.location.hash.split('#')[1] :
const token = window.localStorage.getItem("access_token")//是否登录
let openid = window.localStorage.getItem("openid");
if (routerList.indexOf(to.path) === -1) { //不需要登录后回来的地址 比如修改密码页面
window.localStorage.setItem('redirectUrl', to.path); //记录未登录之前从哪个菜单点击的登录的，登录成功之后跳转到这个页面
if (!to.meta.requireAuth && !token && !openid) { //如果用户未登录没有openid又不需要用户登录的页面 比如微官网的页面 到登录页面之后进入beforeRouteEnter之后用户未绑定登录关系需要返回的页面
window.localStorage.setItem('landingUrl', to.path);
}
}
if ((to.meta.requireAuth || !openid) && routerList.indexOf(to.path) === -1) {
if (!token) {
document.title = "登录";
next({
path: '/login',
});
} else if (roleType && to.meta.role.indexOf(roleType) === -1) { //没权限
if (to.meta.requireRole) { //暂无权限
document.title = "能源e+";
next({
path: '/jurisd',
});
// Toast({ message: '您没有访问权限', duration: 1000 })
}
} else {
document.title = to.meta.title;
next();
}
} else {
document.title = to.meta.title;
next();
}
});
export default router
