【vue3+ts后台管理】路由守卫和退出登录

文章目录

• ​​首页菜单选中​​
• ​​首页重定向​​
• ​​路由守卫​​
• ​​退出登录​​

首页菜单选中

每次我们刷新页面，左侧菜单都没有选中

修改 HomeView.vue，获取当前页面 path，给 Menu 菜单的​​default-active​​动态赋值，这个值是默认激活菜单的 index

<el-menu
  active-text-color="#ffd04b"
  background-color="#545c64"
  class="el-menu-vertical-demo"
  :default-active="active"
  text-color="#fff"
  router
>

setup() {
    const router = useRouter()
    const list = router.getRoutes().filter(value => value.meta.isShow)
    const route = useRoute()
    console.log(route.path)
    return {
      list,
      active:route.path
    }
  }

这样当我们再刷新页面菜单也会默认选中了

首页重定向

当我们进入首页​​http://localhost:8080/​​时

，页面是空白的

我们可以直接重定向到商品列表即可

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'home',
    redirect:'goods',
    component: HomeView,
    children:[
     ......
    ]
  },
  ......
]

这样当我们登录完成进入首页时会重定向到商品列表页

路由守卫

当没有登录时，我们需要跳转到登录页，我们来增加路由守卫，修改 index.ts

......
router.beforeEach((to,from,next)=>{
  const token:string|null = localStorage.getItem('token')
  if(!token && to.path !== '/login'){
    next('/login')
  }else{
    next()
  }
})
export default

退出登录

修改 HomeView.vue，把退出登录改为按钮形式，并增加退出登录的方法

<el-col :span="4"><el-button type="primary" @click="delToken">退出登录</el-button></el-col>

    const delToken = ()=>{
      localStorage.removeItem('token')
      router.push('/login')
    }
    return {
      list,
      active:route.path,
      router
    }

​​源码下载​​