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

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

官网文档地址
https://router.vuejs.org/zh/api/#router-beforeeach

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)
}