用sessionStorage实现临时登录/注销功能

前提：确保用户输入正确格式的账号和密码后，使用axios向服务器发送登录请求，服务器返回登录成功的数据（包含token）

登录功能

1.将token保存到sessionStorage中，然后跳转到欢迎页面

登录处理代码

// 1将登录成功之后从接口获取的token保存到客户端的sessionStorage中
        // 1.1项目中除了登录之外的其他API接口，必须在登录之后才能访问
        // 1.2token只在当前网站打开期间生效，所以将token保存在sessionStorage中

        if (!res.data.token) return
        window.sessionStorage.setItem('token', res.data.token)
        // 2通过编程式导航跳转到后台主页，路由地址是/home
        this.$router.push('/home')

2.使用导航守卫，如果有能从sessionStorage中拿到token就允许跳转，否则跳转到登录页面

路由导航守卫代码

// 导航守卫
router.beforeEach((to, from, next) => {
  if (to.path === '/login') return next()
  const tokenStr = window.sessionStorage.getItem('token')
  if (!tokenStr) return next('/login')
  next()
})

注销功能

1.点击注销按钮后删除sessionStorage中的token，并跳转到登录页面

signout() {
      window.sessionStorage.clear()
      this.$router.push('/login')
    }