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内部写法：