一次router拦截器的应用

实现 退出登陆  无法回退到其它页面

当有登陆状态时  可以拿其它页面的地址直接访问

若没有登陆状态   拿其它页面的地址直接访问 会报错

router.beforeEach((to, from, next) => {
  if(to.name==‘login‘){//若是登陆页面
    if(localStorage.getItem("loginStatus")&&localStorage.getItem("loginStatus")=="login"){//判断是否有登陆状态  若有就免登陆 直接跳到个人信息页
      console.log("有登陆状态的 登陆的首页");
      next({
        name:‘personalInfo‘
      });
      return;
    }else{
      console.log("无登陆状态的  登陆的首页");
      next();
      return;
    }
  }else{//若不是登录页
    console.log(‘不是登录页‘);
    if(localStorage.getItem("loginStatus")&&localStorage.getItem("loginStatus")=="login"){//没登陆状态时 提示地址错误
      next();
      return;
    }else if(to.name==‘register‘){
      next();
      return;
    }else{
      if(global.ordermark!=‘‘&&global.lang!=‘‘){//有没有ordermark和lang
        var origin=window.location.origin;
        var url;
        if(process.env.NODE_ENV === ‘production‘){
          url=origin+‘/dist/#/‘+global.ordermark+‘/‘+global.lang;
        }else{
          url=origin+‘/#/‘+global.ordermark+‘/‘+global.lang;
        }
        window.location.href=url;
        return;
      }else{
        tools.alert("地址错误!请重新登陆");
        return;
      }
    }
  }
  next();
})

原文地址:https://www.cnblogs.com/fqh123/p/11040678.html

时间: 2024-11-11 07:11:35

一次router拦截器的应用的相关文章

vue router拦截器的简单使用

之前,为了实现router跳转的每个页面的url上都带上addressCode,然后用了一下router拦截器,很好用,当然也可以专门封装一个方法来实现(跳转的页面上带有addressCode),不过还是感觉router拦截器比较省事. router拦截器就是在路由跳转前后,做一些事情,相当于一个钩子函数. 下面说一下使用方法: 1.在main.js里  引入router import router from "./router/router"; 2.要在 vue实例前写入 //注册一

Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装

1.写在前面 最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2.具体需求 用户鉴权与重定向:使用Vue提供的路由导航钩子 请求数据序列化:使用axios提供的请求拦截器 接口报错信息处理:使用axios提供的响应拦截器 3.简单实现 3.1 路由导航钩子层面鉴权与重定向的封装 路由导航钩子所有配置均在router/index.js,这里是部分代码 import

利用axios的request 拦截器,response 拦截器实现加载层的效果

import Vue from 'vue' import router from '../router' import axios from 'axios' import { Indicator } from 'mint-ui'; import { Toast } from 'mint-ui'; axios.defaults.timeout = 30000; axios.defaults.headers.common['Content-Type'] = 'application/json;cha

axios token验证拦截器

import axios from 'axios'; // req拦截 axios.interceptors.request.use( let token = localStorage.getItem('token') config => { if (token === null) { // 判断是否存在token,如果存在的话,则每个http header都加上token config.headers.Authorization = `${token}`; } return config; }

axios拦截器?

// 引入axios以及element ui中的loading和message组件 import axios from 'axios' import { Loading, Message } from 'element-ui' // 超时时间 axios.defaults.timeout = 5000 // http请求拦截器 var loadinginstace axios.interceptors.request.use(config => {  // element ui Loading方

axios拦截器使用方法

vue中axios获取后端接口数据有时候需要在请求开始时显示loading,请求结束后隐藏loading,这时候到每次调接口时都写上有点繁琐,有时候还会漏写. 这时候axios的拦截器就起了作用,我们可以在发送所有请求之前和操作服务器响应数据之前对这种情况过滤.定义拦截器如下: import Vue from 'vue' import axios from 'axios' import { Indicator } from 'mint-ui' import { Toast } from 'min

Web框架高级功能之模板、拦截器、Json、打包

类Flask框架实现 模板 <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/html"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <br>显示数据<\br> {{

vue axios 拦截器

前言 项目中需要验证登录用户身份是否过期,是否有权限进行操作,所以需要根据后台返回不同的状态码进行判断. 第一次使用拦截器,文章中如有不对的地方还请各位大佬帮忙指正谢谢. 正文 axios的拦截器分为请求拦截器和响应拦截器两种.我一般把拦截器写在main.js里. mian.js//axios请求 import Axios from "axios"; Vue.prototype.$axios = Axios; 请求拦截器 axios.interceptors.request.use(

路由拦截器// 全局守卫

1.为什么需要路由拦截器 为了防止用户在知道组件名称的情况下,没有登录而直接进入相应的页面下,所以要为路由设置一个拦截器,来判断用户是否登录过. 2.怎样设置路由拦截器: 分析:当我们第一次登录的时候,向服务器发送请求,服务器会给我们一个token标记符(这个token时前后台约定好的一个值),客户端拿到这个token后将它保存到本地localstorage或vueX中,当我们再次访问时,将这个token在携带给服务器.服务器会通过算法校验这个token的合法性(这个token会有一个有效期),