Vue Router 路由导航守卫控制访问权限

Vue Router 路由导航守卫控制访问权限

如果用户没有登录，但是直接通过URL访问特定页面，需要重新导航到登录页面。

import VueRouter from 'vue-router'

import Login from "../components/Login"
import Home from "../components/Home"


Vue.use(VueRouter)

const routes = [

  {path:"/",redirect:"/Login"},
  {path:"/login",component:Login},
  {path:"/home",component:Home},
]

const router = new VueRouter({
  routes
})
//挂载路由导航守卫

router.beforeEach((to,from,next)=>{
  //to：将要访问的路径
  //from：代表从哪个路径跳转而来
  //next：是一个函数代表放行
  //next() 放行  next('/login') 强制跳转
  if(to.path ==='/login'){
    return  next()
  }else {
    //获取token
     const tokenStr=window.sessionStorage.getItem('token');
     if(!tokenStr){
        return next('/login');
     }else {
       next()
     }
  }

})

export default router