欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

简单vue路由卫士例子

程序员文章站 2022-03-02 13:33:12
...
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

import Filling from '../components/filling.vue'
import ChoiceTopic from '../components/ChoiceTopic.vue'
import Record from '../components/record.vue'
import Manage from '../components/manage.vue'
import Login from '../components/login.vue'

Vue.use(VueRouter)
// const originalPush = VueRouter.prototype.push
//    VueRouter.prototype.push = function push(location) {
//    return originalPush.call(this, location).catch(err => err)
// }

const routes = [
  {
    path: '/home',
    name: 'home',
    component: Home,
    children:[
      {
        path:"/filling",
        name:'filling',
        component:Filling,
        meta:{requireAuth:true}
      },{
        path:"/choicetopic",
        name:'choiceTopic',
        component:ChoiceTopic,
        meta:{requireAuth:true}
      },{
        path:"/record",
        name:'record',
        component:Record,
        meta:{requireAuth:true}
      },{
        path:"/manage",
        name:'manage',
        component:Manage,
        meta:{requireAuth:true}
      }    
    ],
    meta:{requireAuth:true}
  },{
    path: '/login',
    name: 'login',  
    component: Login,
  },{
    path: '/',
    redirect: '/login'   //重定向
  },
  {
    path: '**',   // 错误路由
    redirect: '/'   //重定向
  } 
]

const router = new VueRouter({
  routes
})

// 全局路由守卫
router.beforeEach((to, from, next) => {
  console.log('已开启路由守卫');
  if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
    if(sessionStorage.getItem("isLogin")){ //判断本地是否存在access_token
      next();
    }else {
      next({
        path:'/'
      })
    }
  }
  else {
    next();
  }

});

export default router

我这里用的是sessionStorage来检验数据,你也可以用vuex或者其他的。
知识点:

meta:{requireAuth:true}
// 全局路由守卫
router.beforeEach((to, from, next) => {
  console.log('已开启路由守卫');
  if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
    if(sessionStorage.getItem("isLogin")){ //判断本地是否存在access_token
      next();
    }else {
      next({
        path:'/'
      })
    }
  }
  else {
    next();
  }
相关标签: vue vue