更换完前端的框架后，登录功能重新实现一次。

一 前端request 的base_url 设置 。

找到utils/request.ts

import axios, {AxiosInstance, AxiosError, AxiosResponse, AxiosRequestConfig} from 'axios';

const service:AxiosInstance = axios.create({
	baseURL: import.meta.env.VITE_BASE_URL as string | undefined,
    timeout: 5000
});

.env.staging 配置 。

VITE_BASE_URL=http://127.0.0.1

启动命令带上 --mode = staging

package.json

{
	"name": "vue-manage-system",
	"version": "5.3.0",
	"private": true,
	"scripts": {
		"staging": "vite --mode=staging",

npm run staging 进行启动。

二 分析现有前端登录

1. 登录相关

localStorage.setItem('ms_username', response.data.user.username);
keys = 'admin'
permiss.handleSet(keys);
localStorage.setItem('ms_keys', JSON.stringify(keys));
router.push('/');

//设置登录用户名
localStorage.setItem('ms_username' ,'xxx');
设置权限项。
localStorage.setItem('ms_keys', 'yyy');

2. 权限相关

    import { defineStore } from 'pinia';

    interface ObjectList {
    [key: string]: string[];
    }

    export const usePermissStore = defineStore('permiss', {
    state: () => {
    const keys = localStorage.getItem('ms_keys');
    return {
    key: keys ? JSON.parse(keys) : <string[]>[],
    defaultList: <ObjectList>{
    admin: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16'],
    user: ['1', '2', '3', '11', '13', '14', '15']
    }
    };
    },
    actions: {
    handleSet(val: string[]) {
    this.key = val;
    }
    }
});

当前初步处理，hardcode 为admin . 后期rbac 时再折腾权限 。

三 对后端接口进行处理。

登录成功后做如下返回 .

{
    "code": 0,
    "msg": "登录成功",
    "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE2ODgyMjcyOTcuMTY1MDY0LCJleHAiOjE2ODgyMzQ0OTcuMTY1MDY0LCJpZCI6MSwidG5hbWUiOiLnjovlhYjnlJ8iLCJtb2JpbGUiOiIxMzg2NjY2ODg4OCIsImN1cl9vcmdfaWQiOjEsImN1cl9zdGFmZl9pZCI6MH0.xv7a5KAiqzqBPEWyFMeuP84rlwsBoBjwURy3cgxYr-A",
    "user": {
        "uid": 1,
        "username": "王先生",
        "is_admin": 1
    }
}

四 前端代码处理。

将登录逻辑调整为调用接口实现 。

//登录修改为调用接口。
const execLogin = ()=>{
	request({
					url: '/user/login',
					method: 'post',
					data:{
					  'mobile':param.username,
					  'pwd':param.password
					}
	}).then(function (response) {
					  
					  if( response.data.code == 0) {
							ElMessage.success('登录成功');
							
							localStorage.setItem('ms_username', response.data.user.username);
							const keys = permiss.defaultList[response.data.user.is_admin == 1 ? 'admin' : 'user'];
							permiss.handleSet(keys);
							localStorage.setItem('ms_keys', JSON.stringify(keys));
							router.push('/');
							
					  } else {
						   ElMessage.error(response.data.msg);
					  }
					  
	}).catch(function (error) {
		 ElMessage.error(error);
	})
} 

const submitForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate((valid: boolean) => {
		if (valid) {
			execLogin();
		} else {
			ElMessage.error('登录失败');
			return false;
		}
	});
};

调试走通登录。

对应的localStorage

五 退出登录，钩一下api 请求。

heder.vue

const router = useRouter();
const handleCommand = (command: string) => {
	if (command == 'loginout') {
		
		request({
				url: '/user/logout?token='+ localStorage.getItem('ms_token'),
				method: 'get'
		
		}).then(function (response) {
			//ElMessage.error(response.data.msg);
			localStorage.removeItem('ms_username');
			router.push('/login');	
	  
		}).catch(function (error) {
			// ElMessage.error(error);
		})
	
	} else if (command == 'user') {
		router.push('/user');
	}
};