一、主要实现思路:
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')
}