vue中在路由中设置是否登录的判断

1.在main.js中添加如下代码
import Vue from ‘vue’
import App from ‘./App’
import router from ‘./router’

Vue.config.productionTip = false

router.beforeEach((to, from, next) => {
// console.log(to)
// 方法1：通过在路由元信息中添加登陆验证字段来实现进入某个页面时是否需要验证登录
if (to.meta.requireAuth) { // 判断路由元信息中是否添加登陆验证字段
// 判断 sessionStorage 中是否有登陆信息，如果已经有登陆信息，则放行
if (sessionStorage.getItem(‘accessToken’)) { //
next()
} else {
// 如果没有登录则跳转到登陆页面
next({
path: ‘/login’
})
}
} else {
next()
}
// 方法2：不用再路由元信息中添加登陆验证字段，直接判断只要进入的不是登录页，全部都要进行登录验证
// if (to.path === ‘/login’) {
// console.log(‘如果进入的是登陆页，则放行’)
// next()
// } else { // 如果进入的不是登陆页
// // 判断 sessionStorage 中是否有登陆信息，如果已经有登陆信息，则放行
// // console.log(sessionStorage.getItem(‘accessToken’))
// if (sessionStorage.getItem(‘accessToken’)) {
// next()
// } else {
// // 如果没有登录则跳转到登陆页面
// next({
// path: ‘/login’
// })
// }
// }

})

/* eslint-disable no-new */
new Vue({
el: ‘#app’,
router,
components: {
App
},
template: ‘’
})
2.在router的index文件中添加属性
import Vue from ‘vue’
import Router from ‘vue-router’
import HelloWorld from ‘@/components/HelloWorld’
import Login from ‘@/components/Login’
import List from ‘@/components/List’

Vue.use(Router)

export default new Router({
routes: [
{
path: ‘/’,
name: ‘HelloWorld’,
component: HelloWorld
}, {
path: ‘/login’,
name: ‘Login’,
component: Login
}, {
path: ‘/list’,
name: ‘List’,
meta: {
requireAuth: true // 添加该字段 ( 字段名可以自定义 )，表示进入这个路由是需要登录的
},
component: List
}
]
})