vue路由跳轉時，判斷是否登錄及權限驗證簡單理解

1、router.js路由內部寫法

import Vue from "vue"
import VueRouter from "vue-router"
import Home from "../views/home.vue"
import List from "../views/list.vue"
import Mine from "../views/mine.vue"
import Ex from "../views/ex.vue"
import Maps from "../views/maps.vue"
import Login from "../views/login.vue"
// Vue.use(VueRouter)
// 定義路由
const router= new VueRouter({
    routes: [
        {
            path: '/',
            redirect: '/home',
        },
        {
            path: '/home',
            name: 'home',
            component: Home
        },
        {
            path: '/list',
            name: 'list',
            component: List,
            meta:{
                auth:true//添加字段判斷該頁面是否需要登錄
            }
        },
        {
            path: '/mine',
            name: 'mine',
            component: Mine,
            meta:{
                auth:false
            }
        },
        {
            path: '/ex',
            name: 'ex',
            component: Ex
        },
        {
            path: '/maps',
            name: 'maps',
            component: Maps
        },
        {
            path: '/login',
            name: 'login',
            component: Login
        }
    ]
})
// 路由守衛
router.beforeEach((to,from,next)=>{
    // to要跳轉到的路徑
    // from從哪個路徑來
    // next往下執行的回調
    // 在localStorage中獲取token
    let token=localStorage.getItem('userName')
    // 判斷該頁面是否需要登錄
    if(to.meta.auth){
        // 如果token存在直接跳轉
        if(token){
            next()
        }else{
            // 否則跳轉到login登錄頁面
            next({
                path:'/login',
                // 跳轉時傳遞參數到登錄頁面，以便登錄后可以跳轉到對應頁面
                query:{
                    redirect:to.fullPath
                }
            })
        }
    }else{
        // 如果不需要登錄，則直接跳轉到對應頁面
        next()
    }
})

export default router

2、在main.js中引入router.js

import Vue from 'vue'
import App from './App.vue'
import store from './store'
import router from "./route/index"
import VueRouter from "vue-router"

Vue.use(VueRouter);

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

3、在login.vue登錄頁面中進行相應判斷，根據登錄狀態及所接收參數判斷登錄之后是否需要跳轉到對應頁面

<template>
  <div>
    <input type="text" placeholder="用戶名" v-model="name" />
    <input type="password" placeholder="密碼" v-model="password" />
    <button @click="submit">登錄</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      password: ""
    };
  },
  created() {},
  methods: {
    submit() {
      //登錄成功后存儲用戶信息
      localStorage.setItem("userName", this.name);
      localStorage.setItem("passWord", this.password);
      // 接收參數，如果存在redirect參數，登錄后重定向到指定頁面
      if (this.$route.query.redirect) {
        this.$router.push({ path: this.$route.query.redirect });
      // 如不存在，直接跳轉到首頁
      } else {
        this.$router.push({ path: "/home" });
      }
    }
  }
};
</script>

<style lang="scss">
</style>

 

附對應截圖：

router.js中路由守衛部分的寫法：

 

 login.vue內部寫法：