vue-router判断页面需要登录router.beforeEach

雨点打透心脏的1/2处 2023-06-17 15:52 13阅读 0赞

## 配置vue-router，控制页面登录后可见，未登录跳转到登录login页面 ##

官网文档地址  
[https://router.vuejs.org/zh/api/\#router-beforeeach][https_router.vuejs.org_zh_api_router-beforeeach]

![在这里插入图片描述][20191129160729356.gif]

router/index.js  
\_import为自定义js，就不放出来，直接import组件即可

import Vue from 'vue'
    import Router from 'vue-router'
    Vue.use(Router)
    
    export default new Router({ 
      mode: 'history',
      routes: [
        { 
          path: '/',
          name: 'public',
          component: _import('public/index')
        },
        { 
          path: '/home',
          name: 'home',
          meta: { 
            requireLogin: true
          },
          component: _import('home/index')
        },
        { 
          path: '/login',
          name: 'login',
          component: _import('login/index')
        }
      ]
    })

main.js

import { getToken} from './utils/auth'
    
    // 判断路由登录状态
    router.beforeEach((to, from, next) => { 
      if (to.meta.requireLogin) { 
        // 页面需要登录后访问
        if (getToken()) { 	//getToken() 方法在auth.js中
          next() // 表示已经登录
        } else { 
          next({ 
            name: 'login'
          })
        }
      } else { 
        next()
      }
    })

auth.js

import Cookies from 'js-cookie'
    const TokenKey = 'express-demo-token'
    
    export function getToken () { 
      return Cookies.get(TokenKey)
    }
    
    export function setToken (token) { 
      return Cookies.set(TokenKey, token)
    }
    
    export function removeToken () { 
      return Cookies.remove(TokenKey)
    }

[https_router.vuejs.org_zh_api_router-beforeeach]: https://router.vuejs.org/zh/api/#router-beforeeach
[20191129160729356.gif]: https://img-blog.csdnimg.cn/20191129160729356.gif