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

相关推荐
nongcunqq1 小时前
abap 操作 excel
java·数据库·excel
软件技术NINI2 小时前
html css网页制作成品——HTML+CSS盐津铺子网页设计(5页)附源码
前端·css·html
rain bye bye2 小时前
calibre LVS 跑不起来 就将setup 的LVS Option connect下的 connect all nets by name 打开。
服务器·数据库·lvs
mapbar_front3 小时前
面试问题—我的问题问完了,你还有什么想问我的吗?
前端·面试
quweiie3 小时前
thinkphp8+layui多图上传,带删除\排序功能
前端·javascript·layui
阿里云大数据AI技术3 小时前
云栖实录|MaxCompute全新升级:AI时代的原生数据仓库
大数据·数据库·云原生
李鸿耀3 小时前
React 项目 SVG 图标太难管?用这套自动化方案一键搞定!
前端
闲蛋小超人笑嘻嘻3 小时前
树形结构渲染 + 选择(Vue3 + ElementPlus)
前端·javascript·vue.js
不剪发的Tony老师4 小时前
Valentina Studio:一款跨平台的数据库管理工具
数据库·sql
叶梅树4 小时前
从零构建A股量化交易工具:基于Qlib的全栈系统指南
前端·后端·算法