5. 用路由守卫做登录校验

实现未登录不可以浏览首页

在router中加入路由守卫 router.beforeEach

const router = createRouter({
  history: createWebHashHistory(),
  routes,
})
router.beforeEach((to, from, next) => {
  const isLogin = JSON.parse(localStorage.getItem('isLogin') || '""')
  isLogin || to.name === 'Login' ? next() : next('/login')
})

next中可以传入path 或者 name 等
name是路由的name

  {
    path: '/login',
    name: 'Login',
    component: Login,
  },

localStorage有三种读取/写入的方式

localStorage['a'] = 1
localStorage.b = true
localStorage.setItem('c', 'hello')

点击登录按钮时跳转到Home组件

使用 useRouter Composition API获取路由
router.push实现 url 切换， 文档

import { useRouter } from 'vue-router'
export default {
  setup(){
    const router = useRouter()
    const handleLogin = () => {
      localStorage.isLogin = true
      router.push({name: 'Home'})
    }
    return {
      handleLogin
    }
  }
}

已登录则不能跳转至登录页面

添加路由独享守卫 beforeEnter, 在跳转到该路由前做判断

{
  path: '/login',
  name: 'Login',
  component: Login,
  beforeEnter: (to, from, next) => {
      const isLogin = JSON.parse(localStorage.getItem('isLogin') || '""')
      isLogin ? next({ name: 'Home' }) : next()
},