效果

image.png
登录成功后
image.png
token会存储在localStorage里
image.png

3-1 环境变量配置

vue3-elemetn-admin 根目录下创建环境变量文件，生产环境这里只是写个假的
image.png

3-2 创建api

image.png

封装request.ts

src/api/config/request.ts

  1. import axios from 'axios'
  2. import { getToken } from '../../utils/auth'
  3. import { ElMessage } from 'element-plus'
  5. const service = axios.create({
  6.   baseURL: process.env.VUE_APP_BASE_API,
  7.   timeout: 100000
  8. })
  10. service.interceptors.request.use(config => {
  11.   const token = getToken()
  12.   if (token) { // 携带token
  13.     config.headers.Authorization = `Bearer ${token}`
  14.   }
  15.   return config
  16. }, error => {
  17.   console.log(error)
  18.   return Promise.reject(error)
  19. })
  21. service.interceptors.response.use(response => {
  22.   const { code, message } = response.data
  23.   if (code !== 0) { // 错误提示
  24.     ElMessage.error(message)
  25.     return Promise.reject(message)
  26.   }
  27.   return response.data
  28. }, error => {
  29.   console.log('err' + error) // for debug
  30.   return Promise.reject(error)
  31. })
  33. export default service

封装响应类型

src/api/type.ts

  1. export interface ApiResponse<T = any> {
  2.   code: number;
  3.   data: T;
  4.   message?: string;
  5. }

创建user api

src/api/user.ts

  1. import request from '@/api/config/request'
  2. import { ApiResponse } from './type'
  4. interface UserLoginData {
  5.   username: string;
  6.   password: string;
  7. }
  9. interface LoginResponseData {
  10.   token: string;
  11. }
  13. export const login = (data: UserLoginData): Promise<ApiResponse<LoginResponseData>> => {
  14.   return request.post(
  15.     '/auth/login',
  16.     data
  17.   )
  18. }

3-3 store中创建user module

添加user module

image.png
src/store/modules/user.ts

  1. import { Module, MutationTree, ActionTree } from 'vuex'
  2. import { IRootState } from '@/store'
  3. import { login } from '@/api/user'
  4. import { setToken } from '@/utils/auth'
  6. // login params
  7. export interface IUserInfo {
  8.   username: string;
  9.   password: string;
  10. }
  12. // 定义state类型
  13. export interface IUserState {
  14.   token: string;
  15. }
  17. // mutations类型
  18. type IMutations = MutationTree<IUserState>
  20. // actions类型
  21. type IActions = ActionTree<IUserState, IRootState>
  23. // 定义state
  24. const state: IUserState = {
  25.   token: ''
  26. }
  28. // 定义mutation
  29. const mutations: IMutations = {
  30.   SET_TOKEN(state, token: string) {
  31.     state.token = token
  32.   }
  33. }
  35. // 定义action
  36. const actions: IActions = {
  37.   login({ commit }, userInfo: IUserInfo) {
  38.     const { username, password } = userInfo
  39.     return new Promise((resolve, reject) => {
  40.       login({ username: username.trim(), password }).then(response => {
  41.         const { data } = response
  42.         console.log('data', data)
  43.         commit('SET_TOKEN', data.token)
  44.         setToken(data.token) // localStorage中保存token
  45.         resolve(data)
  46.       }).catch(error => {
  47.         reject(error)
  48.       })
  49.     })
  50.   }
  51. }
  53. // 定义user module
  54. const user: Module<IUserState, IRootState> = {
  55.   namespaced: true,
  56.   state,
  57.   mutations,
  58.   actions
  59. }
  61. export default user

修改store/index.ts

image.png
src/store/index.ts

  1. import { InjectionKey } from 'vue'
  2. import { createStore, Store, useStore as baseUseStore } from 'vuex'
  3. import createPersistedState from 'vuex-persistedstate'
  4. import app, { IAppState } from '@/store/modules/app'
  5. import tagsView, { ITagsViewState } from '@/store/modules/tagsView'
  6. import settings, { ISettingsState } from '@/store/modules/settings'
  7. import user, { IUserState } from '@/store/modules/user'
  8. import getters from './getters'
  10. // 模块声明在根状态下
  11. export interface IRootState {
  12.   app: IAppState;
  13.   user: IUserState;
  14.   tagsView: ITagsViewState;
  15.   settings: ISettingsState;
  16. }
  18. // 通过下面方式使用 TypeScript 定义 store 能正确地为 store 提供类型声明。
  19. // https://next.vuex.vuejs.org/guide/typescript-support.html#simplifying-usestore-usage
  20. // eslint-disable-next-line symbol-description
  21. export const key: InjectionKey<Store<IRootState>> = Symbol()
  23. // 对于getters在组件使用时没有类型提示
  24. // 有人提交了pr #1896 为getters创建泛型 应该还未发布
  25. // https://github.com/vuejs/vuex/pull/1896
  26. // 代码pr内容详情
  27. // https://github.com/vuejs/vuex/pull/1896/files#diff-093ad82a25aee498b11febf1cdcb6546e4d223ffcb49ed69cc275ac27ce0ccce
  29. // vuex store持久化 默认使用localstorage持久化
  30. const persisteAppState = createPersistedState({
  31.   storage: window.sessionStorage, // 指定storage 也可自定义
  32.   key: 'vuex_app', // 存储名 默认都是vuex 多个模块需要指定 否则会覆盖
  33.   // paths: ['app'] // 针对app这个模块持久化
  34.   // 只针对app模块下sidebar.opened状态持久化
  35.   paths: ['app.sidebar.opened', 'app.size'] // 通过点连接符指定state路径
  36. })
  38. const persisteSettingsState = createPersistedState({
  39.   storage: window.sessionStorage, // 指定storage 也可自定义
  40.   key: 'vuex_setting', // 存储名 默认都是vuex 多个模块需要指定 否则会覆盖
  41.   // paths: ['app'] // 针对app这个模块持久化
  42.   // 只针对app模块下sidebar.opened状态持久化
  43.   paths: ['settings.theme', 'settings.originalStyle', 'settings.tagsView', 'settings.sidebarLogo'] // 通过点连接符指定state路径
  44. })
  46. export default createStore<IRootState>({
  47.   plugins: [
  48.     persisteAppState,
  49.     persisteSettingsState
  50.   ],
  51.   getters,
  52.   modules: {
  53.     app,
  54.     user,
  55.     tagsView,
  56.     settings
  57.   }
  58. })
  60. // 定义自己的 `useStore` 组合式函数
  61. // https://next.vuex.vuejs.org/zh/guide/typescript-support.html#%E7%AE%80%E5%8C%96-usestore-%E7%94%A8%E6%B3%95
  62. // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
  63. export function useStore () {
  64.   return baseUseStore(key)
  65. }
  67. // vuex持久化 vuex-persistedstate文档说明
  68. // https://www.npmjs.com/package/vuex-persistedstate

utils里封装token 存储操作方法

src/utils/auth.ts

  1. const tokenKey = 'V3-Admin-Token'
  3. export const getToken = (): string | null => {
  4.   return localStorage.getItem(tokenKey)
  5. }
  7. export const setToken = (token: string): void => {
  8.   return localStorage.setItem(tokenKey, token)
  9. }
  11. export const removeToken = (): void => {
  12.   return localStorage.removeItem(tokenKey)
  13. }

3-4 接入登录逻辑

image.png
src/views/login/index.vue

  1. <template>
  2.   <div class="login-container">
  3.     <el-form
  4.       class="login-form"
  5.       :model="loginForm"
  6.       :rules="loginRules"
  7.       ref="loginFormRef"
  8.     >
  9.       <div class="admin-logo">
  10.         <img class="logo" src="../../assets/logo.png" alt="logo">
  11.         <h1 class="name">Vue3 Admin</h1>
  12.       </div>
  13.       <el-form-item prop="username">
  14.         <span class="svg-container">
  15.           <svg-icon icon-class="user"></svg-icon>
  16.         </span>
  17.         <el-input
  18.           ref="usernameRef"
  19.           placeholder="请输入用户名"
  20.           v-model="loginForm.username"
  21.           autocomplete="off"
  22.           tabindex="1"
  23.         />
  24.       </el-form-item>
  26.       <el-form-item prop="password">
  27.         <span class="svg-container">
  28.           <svg-icon icon-class="password"></svg-icon>
  29.         </span>
  30.         <el-input
  31.           ref="passwordRef"
  32.           :class="{
  33.             'no-autofill-pwd': passwordType === 'password'
  34.           }"
  35.           placeholder="请输入密码"
  36.           v-model="loginForm.password"
  37.           type="text"
  38.           autocomplete="off"
  39.           tabindex="2"
  40.         />
  41.         <span class="show-pwd" @click="showPwd">
  42.           <svg-icon
  43.             :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
  44.         </span>
  45.       </el-form-item>
  47.       <!-- 登录按钮 -->
  48.       <el-button
  49.         type="primary"
  50.         style=" width: 100%; margin-bottom: 30px"
  51.         :loading="loading"
  52.         @click="handleLogin"
  53.       >Login</el-button>
  54.     </el-form>
  55.   </div>
  56. </template>
  58. <script lang="ts">
  59. import { defineComponent, ref, reactive, toRefs, onMounted } from 'vue'
  60. import { ElForm } from 'element-plus'
  61. import { useRouter } from 'vue-router'
  62. import { useStore } from '@/store'
  64. type IElFormInstance = InstanceType<typeof ElForm>
  65. export default defineComponent({
  66.   name: 'Login',
  67.   setup() {
  68.     const store = useStore()
  69.     const router = useRouter()
  70.     const loading = ref(false) // 登录加载状态
  71.     // form ref
  72.     const loginFormRef = ref<IElFormInstance | null>(null)
  73.     // form username ref
  74.     const usernameRef = ref<HTMLInputElement | null>(null)
  75.     // form password ref
  76.     const passwordRef = ref<HTMLInputElement | null>(null)
  78.     const loginState = reactive({
  79.       loginForm: {
  80.         username: '',
  81.         password: ''
  82.       },
  83.       loginRules: {
  84.         username: [
  85.           {
  86.             required: true,
  87.             trigger: 'blur',
  88.             message: '请输入用户名！'
  89.           }
  90.         ],
  91.         password: [
  92.           {
  93.             required: true,
  94.             trigger: 'blur',
  95.             message: '请输入密码！'
  96.           }
  97.         ]
  98.       },
  99.       passwordType: 'password'
  100.     })
  102.     // 显示密码
  103.     const showPwd = () => {
  104.       loginState.passwordType = loginState.passwordType === 'password' ? 'text' : 'password'
  105.     }
  107.     // 登录
  108.     const handleLogin = () => {
  109.       console.log('login')
  110.       ;(loginFormRef.value as IElFormInstance).validate((valid) => {
  111.         if (valid) {
  112.           loading.value = true
  113.           store.dispatch('user/login', loginState.loginForm).then(() => {
  114.             router.push({
  115.               path: '/'
  116.             })
  117.           }).finally(() => {
  118.             loading.value = false
  119.           })
  120.         } else {
  121.           console.log('error submit!!')
  122.         }
  123.       })
  124.     }
  126.     // 自动获取焦点
  127.     onMounted(() => {
  128.       if (loginState.loginForm.username === '') {
  129.         (usernameRef.value as HTMLInputElement).focus()
  130.       } else if (loginState.loginForm.password === '') {
  131.         (passwordRef.value as HTMLInputElement).focus()
  132.       }
  133.     })
  135.     return {
  136.       loading,
  137.       loginFormRef,
  138.       handleLogin,
  139.       showPwd,
  140.       usernameRef,
  141.       passwordRef,
  142.       ...toRefs(loginState)
  143.     }
  144.   }
  145. })
  146. </script>
  148. <style lang="scss">
  149. $bg:#283443;
  150. $light_gray:#fff;
  151. $cursor: #fff;
  152. .login-container {
  153.   .el-form-item {
  154.     border: 1px solid #dcdee2;
  155.     border-radius: 5px;
  156.     .el-input {
  157.       display: inline-block;
  158.       height: 40px;
  159.       width: 85%;
  160.       input {
  161.         background: transparent;
  162.         border: 0;
  163.         -webkit-appearance: none;
  164.         border-radius: 0px;
  165.         padding: 12px 5px 12px 15px;
  166.         height: 40px;
  167.       }
  168.     }
  169.   }
  170.   .no-autofill-pwd { // 解决自动填充问题
  171.     .el-input__inner { // 模仿密码框原点
  172.       -webkit-text-security: disc !important;
  173.     }
  174.   }
  175. }
  176. </style>
  178. <style lang="scss" scoped>
  179. $bg:#2d3a4b;
  180. $dark_gray:#889aa4;
  181. $light_gray:#eee;
  182. .login-container {
  183.   min-height: 100%;
  184.   width: 100%;
  185.   overflow: hidden;
  186.   background-image: url('../../assets/body.svg');
  187.   background-repeat: no-repeat;
  188.   background-position: 50%;
  189.   background-size: 100%;
  190.   .login-form {
  191.     position: relative;
  192.     width: 500px;
  193.     max-width: 100%;
  194.     margin: 0 auto;
  195.     padding: 140px 35px 0;
  196.     overflow: hidden;
  197.     box-sizing: border-box;
  198.     .svg-container {
  199.       padding: 0 10px;
  200.     }
  201.     .show-pwd {
  202.       font-size: 16px;
  203.       cursor: pointer;
  204.       margin-left: 7px;
  205.     }
  206.     .admin-logo {
  207.       display: flex;
  208.       align-items: center;
  209.       justify-content: center;
  210.       margin-bottom: 20px;
  211.       .logo {
  212.         width: 60px;
  213.         height: 60px;
  214.       }
  215.       .name {
  216.         font-weight: normal;
  217.         margin-left: 10px;
  218.       }
  219.     }
  220.   }
  221. }
  222. </style>

3-5 设置代理

image.png
vue.config.js

  1. 'use strict'
  2. // eslint-disable-next-line @typescript-eslint/no-var-requires
  3. const path = require('path')
  5. const resolve = dir => path.join(__dirname, dir)
  7. function chainWebpack(config) {
  8.   // set svg-sprite-loader
  9.   config.module
  10.     .rule('svg') // 在已有的svg loader配置中 排除掉对src/icons里svg进行转换
  11.     .exclude.add(resolve('src/icons'))
  12.     .end()
  13.   // symbolId的意义 https://segmentfault.com/a/1190000015367490
  14.   config.module
  15.     .rule('icons')
  16.     .test(/\.svg$/)
  17.     .include.add(resolve('src/icons'))
  18.     .end()
  19.     .use('svg-sprite-loader')
  20.     .loader('svg-sprite-loader')
  21.     // 设置symbolId名称格式 use元素通过symbolId寻找svg图标
  22.     // <svg>
  23.     //    <use xlink:href="#symbolId"></use>
  24.     // </svg>
  25.     .options({
  26.       symbolId: 'icon-[name]'
  27.     })
  28.     .end()
  29. }
  31. module.exports = {
  32.   chainWebpack,
  33.   devServer: {
  34.     port: 8080,
  35.     open: true,
  36.     overlay: {
  37.       warnings: false,
  38.       errors: true
  39.     },
  40.     proxy: {
  41.       '/dev-api': {
  42.         target: 'http://localhost:3003',
  43.         ws: true,
  44.         changeOrigin: true,
  45.         pathRewrite: { '^/dev-api': '/api' }
  46.       }
  47.     }
  48.   }
  49. }

本节参考源码

源码里方法写错了
localStorage.getItem 写成了 localStorage.get 文档里是对的
image.png
https://gitee.com/brolly/vue3-element-admin/commit/e5b4627ea60a50579fde410e343d029820e318b8