学习目标
- 前端页面授权
- 注册页面
- 登录状态的持久化
学习内容
实现前端页面的授权
import { createRouter, createWebHistory } from 'vue-router'
import PkIndexView from '../views/pk/PkIndexView'
import RecordIndexView from '../views/record/RecordIndexView'
import UserBotIndexView from '../views/user/bot/UserBotIndexView'
import NotFound from '../views/error/NotFound'
import RankListindexView from '../views/ranklist/RankListIndexView'
import UserAccountLoginView from '../views/user/account/UserAccountLoginView'
import UserAccountRegisterView from '../views/user/account/UserAccountRegisterView'
import store from '../store/index'
const routes = [
// 当之输入网址localhost:8080时,跳转重定向
{
path: "/",
name: "home",
redirect: "/pk/",
meta: {
requestAuth: true,
}
},
{
path: "/pk/",
name: "pk_index",
component: PkIndexView,
// 对某个页面进行授权
meta: {
requestAuth: true,
}
},
{
path: "/record/",
name: "record_index",
component: RecordIndexView,
meta: {
requestAuth: true,
}
},
{
path: "/ranklist",
name: "ranklist_index",
component: RankListindexView,
meta: {
requestAuth: true,
}
},
{
path: "/user/bot/",
name: "user_bot_index",
component: UserBotIndexView,
meta: {
requestAuth: true,
}
},
{
path: "/user/account/login/",
name: "user_account_login",
component: UserAccountLoginView,
meta: {
requestAuth: false,
}
},
{
path: "/user/account/register/",
name: "user_account_register",
component: UserAccountRegisterView,
meta: {
requestAuth: false,
}
},
{
path: "/404/",
name: "404",
component: NotFound,
meta: {
requestAuth: false,
}
},
// 当输入乱七八糟的额网址时,跳转404
{
path: "/:catchAll(.*)",
redirect: "/404/"
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
// router再执行之前,先调用这个函数
router.beforeEach((to, from, next) => {
if (to.meta.requestAuth && !store.state.user.is_login) {
next({ name: "user_account_login" })
} else {
next();
}
})
export default router
登录持久化:
就是将token存储到浏览器的本地硬盘里面localstory.
注册效果完成
登录状态持久化
现在的token是存储在前端的state里面(页面刷新就会失效),我们要把它存储到本地浏览器的localstory里面