「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...

相关推荐
C2X13 分钟前
Vue3.0 学习总结
前端
汤姆Tom16 分钟前
CSS 新特性与未来趋势
前端·css·面试
尘世中一位迷途小书童16 分钟前
🚀 pnpm + Monorepo 实战指南:现代前端项目管理的最佳实践
前端·架构
杨超越luckly30 分钟前
HTML应用指南:利用GET请求获取全国中国建设银行网点位置信息
前端·arcgis·html·数据可视化·门店数据
王翼鹏32 分钟前
html 全角空格和半角空格
前端·html
敲代码的嘎仔32 分钟前
JavaWeb零基础学习Day2——JS & Vue
java·开发语言·前端·javascript·数据结构·学习·算法
CsharpDev-奶豆哥36 分钟前
jq获取html字符串中的图片逐个修改并覆盖原html的解决方案
前端·html
忧郁的蛋~1 小时前
EFcore查询a表中符合b表列的值
数据库
Keepreal4961 小时前
pdf文件预览实现
javascript·react.js
IT_陈寒1 小时前
Python性能优化:用这5个鲜为人知的内置函数让你的代码提速50%
前端·人工智能·后端