当前位置： 首页 > wzjs >正文

温州公司做网站微信社群营销

wzjs 2025/8/12 6:47:02
温州公司做网站,微信社群营销,如何推广网站最有效,网页制作教程代码目录 登录认证与退出登录登录认证实现步骤第一步、登录路由配置第二步、实现登录页效果第三步、Pinia 管理认证状态第四步、提交登录表单第六步、axios在请求头上添加认证token 退出登录实现步骤第一步、调用接口api方法 logout第二步、pinia 中实现退出功能第三步、触发退出登…

目录

  • 登录认证与退出登录
    • 登录认证实现步骤
      • 第一步、登录路由配置
      • 第二步、实现登录页效果
      • 第三步、Pinia 管理认证状态
      • 第四步、提交登录表单
      • 第六步、axios在请求头上添加认证token
    • 退出登录实现步骤
      • 第一步、调用接口api方法 logout
      • 第二步、pinia 中实现退出功能
      • 第三步、触发退出登录事件

登录认证与退出登录

vue3的登录认证与退出登录

登录认证实现步骤

第一步、登录路由配置

关于 /login 登录组件路由配置：在 src/router/index.ts 新定义一个 fullscreenRoutes 指定全屏显示路由（登录页），不作用到 layout 布局的渲染出口。

import { createRouter, createWebHistory } from 'vue-router'
import type { RouteRecordRaw } from 'vue-router'// 扩展 RouteMeta 接口，因为 Vue-Router 的配置路由对象的 meta 属性有限，所以需要扩展
declare module 'vue-router' {interface RouteMeta {title?: string; // 菜单标题icon?: string; // 图标linkTo?: string; // 外链地址cache?: boolean; //是否缓存：true缓存，false不缓存，会将 name 值用于 <keep-alive>的includes上hidden?: boolean; // 是否在菜单中显示：true显示，false隐藏isBreadcrumb?: boolean; // 是否显示到面包屑，默认或true会显示，false不显示。}
}
/***  路由表配置数组（单独抽取，后面扩展后端动态加载）*/
export const dynamicRoutes: RouteRecordRaw[] = [... 省略]
/**
* 全屏显示路由，不作用到 layout 布局渲染出口。
* （后端路由控制：后端配置菜单数据中不需要下面的菜单项）
*/
export const fullscreenRoutes: RouteRecordRaw[] = [{path: '/login',name: 'Login',component: () => import('@/views/auth/login.vue'),meta: {title: '登录',hidden: true,},},
];const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [...dynamicRoutes, ...fullscreenRoutes]
})export default router

第二步、实现登录页效果

  1. 声明登录表单的数据类型

    // 登录信息
declare interface LoginData {username: string;password: string;
}

vue3的登录认证与退出登录

  1. 实现静态页面，静态页面代码如下，直接使用即可

    <script setup lang="ts">
import { ref, reactive, toRefs } from 'vue';
import { isUsername, isPassword } from '@/utils/validate';
import { useAuthStore } from '@/stores/auth';
import { useRouter, useRoute } from 'vue-router';const authStore = useAuthStore();const router = useRouter();
const route = useRoute();const formRef = ref();const state = reactive({loading: false,isRemember: true, // 是否记住密码loginData: {username: '',password: '',} as LoginData
});const { loading, isRemember, loginData } = {...toRefs(state)};/*** 校验用户名是否合法* @param rule * @param value * @param callback */
function checkUsername(rule: any, value: string, callback: Function) {if (!value) return callback(new Error('请输入有效帐号/手机号！'));if (!isUsername(value)) return callback(new Error('输入的格式不正确，请重新输入！'));callback(); // 通过
}
/*** 校验密码是否合法*/
function checkPassword(rule: any, value: string, callback: Function) {if(!value) return callback(new Error('请输入有效密码！'));if(!isPassword(value))  return callback(new Error('密码输入错误，请重新输入！'));callback();// 通过
}// 提交表单
function submitForm(){}</script><template><div class="login-container"><div class="login-wrap"><img class="lagin-logo" src="@/assets/logo-01.png"/><div class="login-title"> 帐号登录 </div><el-form class="login-form" ref="formRef" :model="loginData" size="large"><el-form-item prop="username" :rules="{required: true, validator: checkUsername, trigger: 'blur'}"><el-input v-model="loginData.username" placeholder="请输入帐号/手机号" maxlength="30" prefix-icon="ele-User" clearable/></el-form-item><el-form-item prop="password" :rules="{required: true, validator: checkPassword, trigger: 'blur'}"><el-input v-model="loginData.password" type="password" placeholder="请输入密码" maxlength="30" prefix-icon="ele-Unlock" show-password clearable/></el-form-item><el-form-item><div class="login-other"><el-checkbox v-model="isRemember"><span>记住密码</span></el-checkbox></div><el-button class="login-submit" @click="submitForm()"  :loading="loading"  type="primary"> 登 录 </el-button></el-form-item></el-form></div></div>
</template><style lang="scss" scoped>
.login-container {height: 100%;width: 100%;background-image: url('@/assets/loginBj.png');background-size: cover;overflow: hidden;display: flex;align-items: center;// justify-content: center;.login-wrap {width: 410px;height: 460px;background-color: #fff;padding: 30px;margin: auto;margin-right: 130px;box-shadow: #74747462 0 2px 15px;border-radius: 10px;.lagin-logo {max-width: 130px;margin: auto;display: flex;}.login-title {font-size: 20px;height: 70px;line-height: 70px;font-weight: 500;text-align: left;color: #0d1234;letter-spacing: 2px;}.login-form {.el-form-item {margin-bottom: 27px;}.login-other {span {font-size: 13px;font-weight: 500;color: #999;}}.login-submit {width: 100%;height: 40px;letter-spacing: 3px;font-weight: 500;}}}}
</style>

效果：
vue3的登录认证与退出登录

第三步、Pinia 管理认证状态

  1. 创建utils/storage.ts

    /*** window.localStorage 浏览器永久缓存* @method set 设置永久缓存* @method get 获取永久缓存* @method remove 移除永久缓存* @method clear 移除全部永久缓存*/
export const Local = {// 设置永久缓存set(key: string, val: any) {window.localStorage.setItem(key, JSON.stringify(val || ''));},// 获取永久缓存get(key: string) {let json: any = window.localStorage.getItem(key);return JSON.parse(json);},// 移除永久缓存remove(key: string) {window.localStorage.removeItem(key);},// 移除全部永久缓存clear() {window.localStorage.clear();},
};/*** window.sessionStorage 浏览器临时缓存* @method set 设置临时缓存* @method get 获取临时缓存* @method remove 移除临时缓存* @method clear 移除全部临时缓存*/
export const Session = {// 设置临时缓存set(key: string, val: any) {// val为undefined保存时，当get时parse转成json对象会失败，加上 || ''解决这个window.sessionStorage.setItem(key, JSON.stringify(val || ''));},// 获取临时缓存get(key: string) {let json: any = window.sessionStorage.getItem(key);// parse 无法对undefined 和 ''进行解析的return JSON.parse(json);},// 移除临时缓存remove(key: string) {window.sessionStorage.removeItem(key);},// 移除全部临时缓存clear() {window.sessionStorage.clear();},
};

  2. 在 src/types/pinia.d.ts 定义 认证状态 类型：

    // 用户认证信息
declare interface AuthState<T = any> {rememberData?: LoginData; // 记住我（登录数据）accessToken?: string; //访问令牌
}

  3. 创建 src/stores/auth.ts ，Pinia 实现记住密码、登录处理：

记住密码：将登录信息保存下来。 提交登录信息处理，后端接口校验用户名密码正确后，会返回令牌 access_token ，将令牌保存；

import { defineStore } from 'pinia';
import type { RouteRecordRaw } from 'vue-router';
import { Session, Local } from '@/utils/storage';
import { login } from '@/api/auth';
// 保存到 Local或 Session的key名
export const Key = {rememberKey: 'isRemember', // 记住密码的keyaccessTokenKey: 'accessToken', // 访问令牌本地保存的key
}
/**
* 用户所拥有的路由权限
*/
export const useAuthStore = defineStore('auth', {state: (): AuthState<RouteRecordRaw> => {return {rememberData: Local.get(Key.rememberKey), // 记住密码accessToken: Session.get(Key.accessTokenKey), // 访问令牌字符串}},actions: {// 记住密码setRememberPwd(data?: LoginData) {this.rememberData = data;if (data) {Local.set(Key.rememberKey, { username: data.username, password: data.password });} else {Local.remove(Key.rememberKey);}},// 登录操作userLogin(loginData: LoginData) {return new Promise((resolve, reject) => {login(loginData).then((res: any) => {const { data } = res;// 状态赋值const { access_token } = data;this.accessToken = access_token;// 保存到session中Session.set(Key.accessTokenKey, access_token);// 正常响应钩子resolve(res);}).catch((error: Error) => {reject(error); // 异常});});},}
});

第四步、提交登录表单

  1. 创建api/auth/index.ts文件
    import request from "@/utils/request";
const baseUrl = "/auth";
// 登录系统
export function login(data: LoginData) {return request({url: `${baseUrl}/token`,method: 'POST',data});
}
  2. 实现表单登录按钮逻辑
    import { useAuthStore } from "@/stores/auth";
const authStore = useAuthStore();
const state = reactive({loading: false,isRemember: true, // 是否记住密码loginData: {username: authStore.rememberData?.username,password: authStore.rememberData?.password,} as LoginData,
});// 提交登录
function submitForm() {// 如果在登录中，不允许重复登录if (state.loading) return;formRef.value?.validate(async (valid: boolean) => {if (!valid) return false;try {// 登录中state.loading = true;// 记住密码authStore.setRememberPwd(state.isRemember ? state.loginData : undefined);// 发送登录请求await authStore.userLogin(state.loginData);// 跳转来源地址router.replace({ path: <string>route.query?.redirect || "/" });} catch (error) {} finally {}});
}
  3. 效果
    vue3的登录认证与退出登录
    vue3的登录认证与退出登录

第六步、axios在请求头上添加认证token

  1. 在 src/utils/request.ts 的 axios 请求拦截器中针对发送的验合法性:Authorization: Bearer ${accessToken}
    import { useAuthStore } from '@/stores/auth';
// 请求拦截器
request.interceptors.request.use(config => {// 在此处可向请求头加上认证tokenconst authStore = useAuthStore();// 获取tokenconst accessToken = authStore.accessToken;if (accessToken) {// oauth2 请求头 Authorization: Bearer xxxxxconfig.headers.Authorization = `Bearer ${accessToken}`;}return config;
}, error => {// 出现异常, catch可捕获到return Promise.reject(error);
})
  2. 观察登录的时候调用接口，接口中的请求头是否有token
    vue3的登录认证与退出登录

退出登录实现步骤

第一步、调用接口api方法 logout

import request from "@/utils/request";
const baseUrl = "/auth";
// 退出系统
export function logout() {return request({url: `${baseUrl}/logout`,method: 'POST',});
}

第二步、pinia 中实现退出功能

import { defineStore } from 'pinia';
import type { RouteRecordRaw } from 'vue-router';
import { Session, Local } from '@/utils/storage';
import { login, logout } from '@/api/auth';
// 保存到 Local或 Session的key名
export const Key = {rememberKey: 'isRemember', // 记住密码的keyaccessTokenKey: 'accessToken', // 访问令牌本地保存的keyuserInfoKey: 'userInfo', // 用户信息本地保存的key
}
/**
* 用户所拥有的路由权限
*/
export const useAuthStore = defineStore('auth', {state: (): AuthState<RouteRecordRaw> => {return {rememberData: Local.get(Key.rememberKey), // 记住密码accessToken: Session.get(Key.accessTokenKey), // 访问令牌字符串userInfo: Session.get(Key.userInfoKey),}},actions: {// 记住密码setRememberPwd(data?: LoginData) {this.rememberData = data;if (data) {Local.set(Key.rememberKey, { username: data.username, password: data.password });} else {Local.remove(Key.rememberKey);}},userLogout() {return new Promise((resolve, reject) => {logout().then((res: any) => {// 重置状态this.resetUserState();// 重新加载当前页，需认证页面会去登录页window.location.reload();resolve(res);}).catch((error: Error) => {reject(error);})});},// 重置用户状态resetUserState() {this.accessToken = undefined;this.userInfo = undefined;// 移除保存的数据Session.remove(Key.accessTokenKey);Session.remove(Key.userInfoKey);}}
});

第三步、触发退出登录事件

  1. 在 src/layout/layoutHeader/userDropdown.vue 显示用户信息和点击退出系统 authStore.userLogout()
    <template><el-dropdown><template #dropdown><el-dropdown-menu><el-dropdown-item @click="authStore.userLogout()" divided>退出登录</el-dropdown-item></el-dropdown-menu></template></el-dropdown></div>
</template>
<script lang="ts" setup>
import { useFullscreen, useDark } from "@vueuse/core";
import { useLayoutConfigStore } from "../../stores/layoutConfig";
import { useRouter } from "vue-router";
import { useAuthStore } from "../../stores/auth";
const router = useRouter();
const authStore = useAuthStore();
const layoutConfig = useLayoutConfigStore();
</script>

效果：
Vue3登录认证与退出登录

http://www.dtcms.com/wzjs/314281.html

相关文章：

  • 有域名自己做网站贵州整站优化seo平台
  • 做任务的设计网站搭建一个网站需要多少钱
  • 视频网站为什么有人做360优化大师
  • 网站建立的公司百度指数搜索榜度指数
  • 织梦网站源码情感式软文广告
  • 网站搭建空间前端优化网站
  • 厦门哪些企业做视频网站的可以搜索任何网站的浏览器
  • 网站的子域名怎么设置活动推广朋友圈文案
  • 中山市网站建设 中企动力班级优化大师的优点
  • 关于做展厅的网站大型门户网站建设
  • 网站建设与维护大学生总结百度下载app下载安装
  • wordpress文章分享优化seo教程技术
  • 网站设计首页关联词有哪些类型
  • 网站建设朋友圈怎么写百度seo关键词点击软件
  • 深圳做百度网站今日十大头条新闻
  • 提高网站排名怎么做百度seo排名帝搜软件
  • wordpress伪原创插件网站优化策略分析
  • 汕头模板建站代理互联网推广员是做什么
  • 网站建设 价格品牌营销经典案例
  • qq网站安全认证怎么做百度推广可以自己开户吗
  • 做用户名和密码网站页面百度打开
  • 重庆装修网站建设小红书网络营销策划方案
  • 网站模板的制作怎么做北京百度推广客服电话多少
  • 研究院网站建设的内容seo入门版
  • 长丰下塘新农村建设网站腾讯企点app
  • 有名做网站公司seo引擎优化工具
  • 优质手机网站建设推荐微信拓客的最新方法
  • 提供佛山顺德网站建设蜘蛛搜索引擎
  • 网站后台编辑框不显示seo短视频
  • 网站服务器是什么东西微商软文推广平台