Detailed explanation of routing verification and corresponding interception methods in Vue-PHP Tutorial-php.cn

Detailed explanation of routing verification and corresponding interception methods in Vue

小云云

Release： 2023-03-17 21:44:02

Original

1975 people have browsed it

In web projects, routing verification and corresponding interception are often required based on whether you are logged in or not. This article mainly introduces the use of routing verification and corresponding interception in Vue in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

First, write a store.js in vuex to store the login status. The code is as follows

import Vue from &#39;vue&#39;
import Vuex from &#39;vuex&#39;
Vue.use(Vuex)
export default new Vuex.Store({
 state: {
 user: false
 },
 mutations: {
 // 登录
 login (state, user) {
  state.user = user
 },
 // 退出
 logout (state, user) {
  state.user = false
 }
 }
})

Copy after login

Route verification:

Route verification uses router.beforeEach( (to, from, next) => { }
The to here represents the route you want to go to, from refers to which route you are jumping from, and next is Determine the operation. If it is empty, it means release.
For example: the next hop route is '/watchHouse' or '/AgentMsg'. If you are not logged in, use the code next ({path: '/login'})

Jump to the login interface:

if (!store.state.user && (to.path === &#39;/watchHouse&#39; || to.path === &#39;/AgentMsg&#39;)) {
 next({ path: &#39;/login&#39; })
}

Copy after login

For example: under route '/my', you want to jump to. '/ToolCompute', if you are not logged in, jump to the login page. The code is as follows:

if (!store.state.user && (from.path === &#39;/my&#39;) && (to.path === &#39;/ToolCompute&#39;)) {
 next({ path: &#39;/login&#39; })
}

Copy after login

Full code:

router.beforeEach((to, from, next) => {
 if (to.path === &#39;/login&#39;) {
 next()
 } else {
 if (!store.state.user && (to.path === &#39;/watchHouse&#39; || to.path === &#39;/AgentMsg&#39;)) {
  next({ path: &#39;/login&#39; })
 } else {
  next()
 }
 if (!store.state.user && (from.path === &#39;/my&#39;) && (to.path === &#39;/ToolCompute&#39;)) {
  next({ path: &#39;/login&#39; })
 }
 }
})

Copy after login

It should be noted that the routing verification method function is also related to the order of the vue instance. If it is written after vue(), the following will be executed and then judged. ##As shown in the figure below:

Written in this way, of course, the routing jump judgment can be executed, but when we directly enter our When the

complete routing information is required, the routing jump will not be judged, as shown in the following figure:

##. If the routing verification is written in front of the VUE instance, such a problem will not occur. In this way, the routing judgment will be performed first, and then the content in the instance will be executed.

The code sequence is as follows:

Response interception: For example, in the root instance, use the checkLogin() method to determine the status of the login information, and add a login timeout to intercept the response. The code is as follows ##.

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

Copy after login

Related recommendations:

How to use calculated properties in vue

Vue Introduction to the implementation method of .js divided components

Vue methods and event handling issues

The above is the detailed content of Detailed explanation of routing verification and corresponding interception methods in Vue. For more information, please follow other related articles on the PHP Chinese website!