vue2路由拦截

r囧r小猫 2021-10-29 11:22 411阅读 0赞

这是一个剪刀的路由拦截

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

转载于:https://www.cnblogs.com/dmwcq/p/11180724.html

发表评论取消回复

表情：

评论列表（有 0 条评论，411人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue 路由拦截、http拦截

一、路由拦截登录拦截逻辑第一步：路由拦截 > 首先在定义路由的时候就需要多添加一个自定义字段requireAuth，用于判断该路由的访问是否需要登录。如果用户已经

男娘i/ 2023年06月26日 10:57/ 0 赞/ 28 阅读

相关 vue 路由拦截

//全局守卫 router.beforeEach((to, from, next) => { //这里是对登录后的值进行判断，也可对token

怼烎@/ 2023年02月19日 14:27/ 0 赞/ 187 阅读

相关 vue路由登录拦截

一、概述在项目开发中每一次路由的切换或者页面的刷新都需要判断用户是否已经登录，前端可以判断，后端也会进行判断的，我们前端最好也进行判断。 vue-router提供了导

淩亂°似流年/ 2022年11月04日 05:52/ 0 赞/ 237 阅读

相关 VUE —— 9、路由（二级路由、路由拦截）、axios

目录 8.二级路由（1）路由配置（2）二级路由渲染 9.路由拦截（12）axios 1.get请求 2.post请求 3.axios全局引入（很少用，用

待我称王封你为后i/ 2022年08月31日 04:59/ 0 赞/ 356 阅读

相关 VUE —— 9、路由（二级路由、路由拦截）、axios

目录 8.二级路由（1）路由配置（2）二级路由渲染 9.路由拦截（12）axios 1.get请求 2.post请求 3.axios全局引入（很少用，用

小咪咪/ 2022年08月29日 12:54/ 0 赞/ 309 阅读

相关【Vue】2.vue2.0路由及路由嵌套

一、创建项目这里用vue-cli创建项目，创建过程可以参考[vue-cli快速构建项目][vue-cli]，创建完成后生成如下工程目录：二、项目目录 ![Center

ゞ浴缸里的玫瑰/ 2022年06月05日 03:39/ 0 赞/ 354 阅读

相关 vue2 路由（笔记）

更多详细内容看官网[https://router.vuejs.org/zh-cn/essentials/getting-started.html][https_router.v

冷不防/ 2022年06月01日 14:25/ 0 赞/ 211 阅读

相关 vue2路由拦截

这是一个剪刀的路由拦截 router分位两个文件，一个是路由统一配置，一个是具体的路由信息 1路由拦截 import Vue from 'vue' import Vue

r囧r小猫/ 2021年10月29日 11:22/ 0 赞/ 412 阅读

相关 vue axios的路由拦截器

借鉴于：[https://www.kancloud.cn/yunye/axios/234845][https_www.kancloud.cn_yunye_axios_23484

女爷i/ 2021年09月16日 06:40/ 0 赞/ 475 阅读

相关 vue2路由--嵌套路由

一般应用中的路由方式不会像上述例子那么简单，往往会出现二级导航这种情况。这时就需要使用嵌套路由这种写法。 <%@ taglib prefix="c" uri="htt

阳光穿透心脏的1/2处/ 2021年09月14日 15:10/ 0 赞/ 611 阅读