「17」next-shopping:重构代码

今天重构一下代码,就不做新功能了

首先我们把authSlice改为userSlice,因为是登录和退出,用用户来表示比较好,因为前面一些代码有改动,所以我们还是删除store/slices/authSlice.js,然后新建store/slices/userSlice.js

js 复制代码
'use client'
import { createSlice } from '@reduxjs/toolkit'

const token = window.localStorage.getItem('token') || ''

const initialState = { userInfo, token }

const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {
    userLogout: state => {
      localStorage.removeItem('token')
      state.token = ''
    },
    userLogin: (state, action) => {
      localStorage.setItem('token', action.payload)
      state.token = action.payload
    },
    userInfo: (state, action) => {
      state.userInfo = action.payload
    },
  },
})

export const { userLogout, userLogin, userInfo } = userSlice.actions

export default userSlice.reducer

然后在store/index.js中导出

js 复制代码
import { configureStore } from '@reduxjs/toolkit'

import fetchApi from '@/store/slices/fetchApiSlice'
import userReducer from '@/store/slices/userSlice'
import cartSlice from '@/store/slices/cartSlice'

export const store = configureStore({
  reducer: {
    user: userReducer,
    cart: cartSlice,
    [fetchApi.reducerPath]: fetchApi.reducer,
  },
  middleware: getDefaultMiddleware => getDefaultMiddleware().concat(fetchApi.middleware),
})

hooks

实现一个useVerify用来校验token,新建hooks/useVerify.js

js 复制代码
import { useSelector } from 'react-redux'
import jwt from 'jsonwebtoken'

export default function useVerify() {
  const { token } = useSelector(state => state.user)
  let status

  if (!token) return false

  jwt.verify(token, process.env.NEXT_PUBLIC_ACCESS_TOKEN_SECRET, (err, decoded) => {
    if (err) status = false
    if (decoded) status = true
  })

  if (status) return true
  else return false
}

修改components/Layouts/ProfileLayout.tsx

tsx 复制代码
'use client'

import { useRouter } from 'next/navigation'
import { useSelector } from 'react-redux'

import { ClientLayout, ProfileAside } from '@/components'
import useVerify from '@/hooks/useVerify'

export default function ProfileLayout({ children }: any) {
  const isVerify = useVerify()
  const router = useRouter()
  const { user } = useSelector((state: any) => state.user)

  if (!isVerify) {
    router.push('/')
  } else {
    return (
      <>
        <ClientLayout>
          <div className="lg:flex lg:gap-x-4 lg:px-3 lg:container lg:max-w-7xl">
            <div className="hidden lg:block">
              <ProfileAside user={user} />
            </div>
            <div className="py-4 lg:py-8 lg:border lg:border-gray-300 flex-1 lg:rounded-md lg:mt-6 h-fit">
              {children}
            </div>
          </div>
        </ClientLayout>
      </>
    )
  }
}

剩余其他的都是进行了js变成ts

代码地址:github.com/liyunfu1998...

相关推荐
前端小巷子1 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹5 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器11 分钟前
指定阿里镜像原理
前端
枷锁—sha16 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha17 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
m0_6530313620 分钟前
PostgreSQL技术大讲堂 - 第97讲:PG数据库编码和区域(locale)答疑解惑
数据库·postgresql
群联云防护小杜33 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
会编程的林俊杰39 分钟前
MySQL中的锁有哪些
数据库·mysql
cts61840 分钟前
Milvus分布式数据库工作职责
数据库·分布式·milvus
周胡杰40 分钟前
鸿蒙加载预置数据库-关系型数据库-如何读取本地/预制数据库
数据库·华为·harmonyos·鸿蒙