登录页-登录成功后的路由守卫

一、主要实现思路：

1.我们在输入框这个位置输入我们的账号和密码进行登录。

2.例如我们输入账号：jiaKafei  密码：123456

3.点击登录成功之后跳转到首页

二、我们既然要做页面跳转，建议写在pinia 状态管理里面：

1.第一步从router 文件里面里面导入router 对象

2.拿到router 对象 push 操作 跳转到main 页面

import {defineStore} from 'pinia'
import router from '@/router'
import {accountLoginRequest} from '@/service/login/login'
const useLoginStore=defineStore('login',{
    state:()=>({
        id:'', //用户id
        token:localStorage.getItem(this.token)??'', //登录token
        name:''//用户名称
    }),
actions:{
   async loginAccountAction(account){
    //一、账号登录，获取token 等信息
    const accountLoginRes=await accountLoginRequest(account)
    //将对应结果保存到对应的store 当中
    this.id=accountLoginRes.data.id
    this.token=accountLoginRes.data.token
    this.name=accountLoginRes.data.name
     
     //二、进行本地缓存
     localStorage.setItem('token',this.token)
     //三、页面跳转（main 页面）
     router.push('/main')
    }
}
})

三、在路由管理里面做判断逻辑：

1.判断用户是否登录？

登录：main

未登录：login

2.使用路由导航守卫：

 参数：to(跳转到的位置) /from (从哪里跳转过来)

 返回值：返回值决定导航的路径

router.beforeEach((to，from) => {
  //如果去的的是登录页
  if (to.path !== '/login') {
    const token = localCache.getCache('token') //拿到token
    //判断token 有没有值
    if (!token) {
      return '/login'
    }
  }
})

四、退出登录

 1.删除token

2.跳回到登录页面

 <el-dropdown-item @click="handleExdtClick">退出登录</el-dropdown-item>
 
const handleExdtClick=()=>{
  localCache.deleteCache("token")
  router.push('/login')

}