Vue登录注册和退出

最新推荐文章于 2024-07-30 17:41:26 发布

王懿诺

最新推荐文章于 2024-07-30 17:41:26 发布

阅读量156

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/TodayStartWJH/article/details/122642553

版权

本文介绍如何在Vue项目中实现登录、注册和退出功能。主要涉及在main.js中设置导航守卫，以及创建相应的登录、注册和退出页面。

摘要由CSDN通过智能技术生成

main.js添加导航守卫

router.beforeEach((to, from, next) => {
   
  //to 将要访问的路径
  //from 代表从哪一个路径跳转而来
  //next 是一个函数,表示放行

  //next()放行 next('/login') 强制跳转

  if(to.path == '/login') return next();
  //获取token
  const tokenStr = window.sessionStorage.getItem('token');
  if(!tokenStr) return next('/login')
  next()
  
})

export default router

登录页面

<template>
  <div class="login_container">
    <div class="login_box">
      <!-- 头像区域 -->
      <div class="avatar_box">
        <img
          src="https://img0.baidu.com/it/u=3436810468,4123553368&fm=26&fmt=auto"
          alt=""
        />
      </div>
      <!-- 登录表单区域 -->