简单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();
}
下一篇: 【leetcode】-精选top面试