vue路由守卫的使用

﹏ヽ暗。殇╰゛Y 2024-04-19 11:00 92阅读 0赞

使用路由守位我们需要使用vuex来存放全局的用户信息

## ①存在全局用户信息 ##

1.首先展示我的项目路径  
![在这里插入图片描述][20190917154619956.png]  
2.store/index.js文件内容如下：  
这里主要是引入一些文件，以及进行挂载

import Vue from 'vue'
    import Vuex from 'vuex'
    import state from './state'
    import mutations from './mutations'
    
    Vue.use(Vuex)
    
    const store = new Vuex.Store({
        state,
        mutations
    })
    
    export default store;

3.mutations.js文件内容如下：  
因为我没有用后台，就用一个方法来改变用户的信息，来模拟这个获取信息的过程

export default {
        login(state) {
            state.userInfo = "用户信息";
        },
    }

4.state.js文件内容如下：  
用于存在全局用户的信息

export default {
        userInfo: ""
    }

## ②添加路由守卫以及使用vuex ##

1.login.vue内容如下：

<template>
      <div class="index">
        <h1>登陆页</h1>
        <router-link to="/index">
          <button @click="getInfo">获取用户信息</button>
        </router-link>
      </div>
    </template>
    
    <script>
    export default {
      name: "index",
      data() {
        return {};
      },
      computed: {},
      methods: {
        getInfo() {
          this.$store.commit("login");
        }
      }
    };
    </script>
    
    
    <style scoped>
    </style>

2.main.js文件内容如下：

// The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import Vuex  from 'vuex'
    import App from './App'
    import router from './router'
    import store from './store'
    
    Vue.use(Vuex)
    
    Vue.config.productionTip = false
    
    
    // 全局路由守卫
    router.beforeEach((to, from, next) => {
        console.log(store.state, 'store.state');
        if(store.state.userInfo || to.path === "/login") {
          next();
        } else {
          next({
            path: "/login"
          })
        }
    })
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      store,
      router,
      components: { App },
      template: '<App/>'
    })

这里的逻辑是：  
1.如果用户信息为空的话，就会自动跳转到登录页  
2.如果用户信息不为空的话，就允许跳转到其他页面，我这里以跳转到首页为例

## ③页面展示 ##

1.打开项目以后会自动跳转到login页  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTEyMjEyMA_size_16_color_FFFFFF_t_70]  
可以看到我们此时是没有获取到数据的，userInfo为空

2.点击获取用户信息按钮  
通过点击获取信息按钮，来调用mutations中的login方法，从而来给userInfo添加数据  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTEyMjEyMA_size_16_color_FFFFFF_t_70 1]  
可以看到当我们点击获取用户信息按钮以后，userInfo不再为空了，此时也可以进行页面的跳转了

ps：以上展示的只是一个简单的小demo，实际的项目要比这个复杂一些，本人也是初入职场，请多指教

[20190917154619956.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/b73013eedf4641f6bf1cc3c8e0d21132.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTEyMjEyMA_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/9119c2d017dc4aec889ab9a299b4bf12.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTEyMjEyMA_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/afae24b005c54ac189e6cc771d5009da.png