Rumah > pembangunan bahagian belakang > tutorial php > 详解vue中路由验证和相应拦截使用方法

详解vue中路由验证和相应拦截使用方法

小云云
Lepaskan: 2023-03-17 21:44:02
asal
1969 orang telah melayarinya

在web项目中,经常需要根据是否登录进行路由的验证和相应的拦截。本文主要为大家详细介绍了vue中路由验证和相应拦截的使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。

首先,在vuex里的store.js里边写一个存放登录状态,代码如下


import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
 state: {
 user: false
 },
 mutations: {
 // 登录
 login (state, user) {
  state.user = user
 },
 // 退出
 logout (state, user) {
  state.user = false
 }
 }
})
Salin selepas log masuk

路由验证:

路由验证用 router.beforeEach( (to, from, next) => { }
这里的to代表要去的路由指向,from是指从哪个路由跳转过来的,next是判断操作,如果为空,表示放行。
比如:下一跳的路由为‘/watchHouse'或者‘/AgentMsg' ,如果没有登录的话,通过代码 next ({path: '/login'})

跳转到登录的界面。代码如下:


if (!store.state.user && (to.path === '/watchHouse' || to.path === '/AgentMsg')) {
 next({ path: '/login' })
}
Salin selepas log masuk

比如:在路由‘/my'下,要跳往 ‘/ToolCompute',如果没有登录的话,跳转到登录页面。代码如下:


if (!store.state.user && (from.path === '/my') && (to.path === '/ToolCompute')) {
 next({ path: '/login' })
}
Salin selepas log masuk

全部代码:


router.beforeEach((to, from, next) => {
 if (to.path === '/login') {
 next()
 } else {
 if (!store.state.user && (to.path === '/watchHouse' || to.path === '/AgentMsg')) {
  next({ path: '/login' })
 } else {
  next()
 }
 if (!store.state.user && (from.path === '/my') && (to.path === '/ToolCompute')) {
  next({ path: '/login' })
 }
 }
})
Salin selepas log masuk

需要注意的是,路由验证这个方法函数与vue实例的顺序还有关系。如果写在vue()的后面,下面就会执行,后判断。

如下图所示:

这样写,当然是可以执行的路由跳转判断的,但是当我们直接在浏览器的地址栏里直接输入我们要跳转的

完整路由信息的时候,这个路由跳转就不会被判断了。如下图所示:


如果把路由验证写到VUE实例的前面,就不会出现这样的问题了,这样就会先进行路由判断,再进行执行实例里边的内容了。

代码顺序如下所示:

响应拦截:比如在根实例中通过checkLogin()这个方法去判断,登录信息 的状态,加入登录超时,则进行响应拦截,代码如下。


var app=new Vue({
 el: '#app',
 router,
 store,
 created(){
 checkLogin().then(function (res) {
  if(res.data&&res.data.code==1){
  store.commit('login',true);
  }
  else{
  router.push('/watchHouse-css');
  }
 })
 },
 template: &#39;<App/>&#39;,
 components: { App }
})


//响应拦截器
axios.interceptors.response.use(function(res){
 //如果是未登录
 if(res.data&&res.data.code==2){
 app.$alert(&#39;登录用户已超时,请重新登录&#39;, &#39;提示&#39;, {
  confirmButtonText: &#39;确定&#39;,
  type:&#39;warning&#39;,
  closeOnClickModal:false,
  callback: action => {
  router.push(&#39;/watchHouse-css&#39;)
  }
 });
 }
 return res;
},function(err){
 return Promise.reject(err);
})
Salin selepas log masuk

相关推荐:

vue中的计算属性的使用方法

Vue.js划分组件的实现方法介绍

Vue 方法与事件处理的问题

Atas ialah kandungan terperinci 详解vue中路由验证和相应拦截使用方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan