4.3 配置Mysql与注册登录模块（下）

学习目标

1. 前端页面授权
2. 注册页面
3. 登录状态的持久化

学习内容

实现前端页面的授权

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里面