01用户登录,登出,token等框架说明
01.cookie 设置
src/utils/auth.js
- 首先要安装 cookies 插件
npm i cookies
- 代码 11 和 26 行，设置了失效 7 天；
- 代码 4 和 19 行，key 是可以自定义的；
import Cookies from 'js-cookie'
// token key
const TokenKey = 'mine_token';
// 获取 token
export function getToken() {
return Cookies.get(TokenKey)
}
// 设置 token，expires 7 天有效
export function setToken(token) {
return Cookies.set(TokenKey, token, {expires: 7})
}
// 删除 token
export function removeToken() {
return Cookies.remove(TokenKey)
}
// 用户 key
const UserKey = 'mine_user';
// 获取
export function getUser() {
return Cookies.get(UserKey)
}
// 设置
export function setUser(user) {
return Cookies.set(UserKey, user, {expires: 7})
}
// 删除
export function removeUser() {
return Cookies.remove(UserKey)
}
02.axios 拦截设置
前提要先设置全局 API，在文件 .env.development 和 .env.production
# base api
VUE_APP_BASE_API = 'http://192.168.182.13:8088'
src/utils/request.js
- 代码 9 行，
header中的token不一定要replace替换。根据返回的token字符串而定； - 代码 9 和 17 行是否重新设置，有冲突。江西矿山只设置了 20，也没影响；
- 代码 9 和 16 行，
getToken方法获取 token 有可能为空 或 7 天到期失效。详见src/utils/auth.js；
import axios from 'axios'
import { Message } from 'element-ui'
import router from '@/router'
import { getToken } from '@/utils/auth'
// 新建 axios
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
// headers: { 'Authorization': getToken().replace('%20', ' ') } // 设置请求头
timeout: 5000
})
// request 请求前拦截
service.interceptors.request.use(
config => {
if (getToken()) {// 测试，这里是否添加
config.headers['X-Token'] = token;
}
return config
},
error => {
return Promise.reject(error)
}
)
// response 响应拦截
service.interceptors.response.use(
response => {
const res = response.data
if(res.code == 401){
Message({
message: '身份验证过期，请登录',
type: 'warning',
duration: 5 * 1000
})
router.push('/')
}
return res
},
error => {
if (401 === error.response.status) {
Message({
message: '身份验证过期，请登录',
type: 'warning',
duration: 5 * 1000
});
// 这里有可能是 '/' 或 '/login'
router.push('/');
} else {
console.log('err' + error) // for debug
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
}
return Promise.reject(error)
}
)
export default service
03.用户 API
src/api/user.js
- 注意如下 url 或请求方式
get和post以具体的接口而定 - 可能有 登录、获取用户信息、登出等；
import request from '@/utils/request'
// 获取用户信息
export function getInfo(id) {
return request({
url: `/mapgis/gm/v1/user/${id}/info`,
method: 'get'
})
}
// 登出
export function logout() {
return request({
url: '/vue-admin-template/user/logout',
method: 'get'
})
}
04.VueX user
src/store/modules/user.js
- 代码 34 - 45 行，不是使用 axios 拦截，因为登录不需要；
import { getInfo } from '@/api/user'
import { getToken, setToken, removeToken, getUser, setUser, removeUser } from '@/utils/auth'
// 状态
const state = {
token: getToken(),
name: getUser(),
userId: '',// 可选项
userRole: '',// 用户角色
userInfo: null
}
// 同步设置
const mutations = {
// token
SET_TOKEN: (state, token) => {
state.token = token;
},
// name
SET_NAME: (state, name) => {
state.name = name;
},
// 用户 id
SET_USERID: (state, userId) => {
state.userId = userId;
},
// 用户 角色
SET_USERROLE: (state, userRole) => {
state.userRole = userRole;
},
// 用户 信息对象
SET_USERINFO: (state, userInfo) => {
state.userInfo = userInfo;
}
}
// 异步设置
const actions = {
// 登录
login({ commit }, userInfo) {
const { form, axios } = userInfo;
return new Promise((resolve, reject) => {
let url = '/v1/auth/login';
axios.post(url, form).then((resp) => {
if (resp.data.succ) {
let obj = resp.data.obj;
setToken(obj.token);//设置 token cookie
setUser(form.user);//设置用户名 user cookie
commit('SET_TOKEN', obj.token);//设置token
commit('SET_NAME', form.user);//设置用户名
resolve();
} else {
reject(resp)
}
});
})
},
// 获取用户信息
getInfo({ commit, state }) {
return new Promise((resolve, reject) => {
getInfo(state.token).then(response => {
if(resp.succ) {
let info = resp.obj;
commit('SET_USERID', info.uid)
commit('SET_USERROLE', info.roleNames[0])
commit('SET_USERINFO', info)
resolve();
} else {
reject(resp)
}
}).catch(error => {
reject(error)
})
})
},
// 登出
logout({ commit, state }) {
// 删除 cookie
removeToken();
removeUser();
// 删除信息
commit('SET_TOKEN', '');
commit('SET_NAME', '');
commit('SET_USERID', '');
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
05.路由前置守卫
src/router/index.js
- 引入
cookie；
import { getToken } from '@/utils/auth'
- 此处使用全局前置守卫，如果是单个页验证可参考 路由独享的守卫；
- 如果项目还在开发阶段，暂不使用权限验证，可直接屏蔽如下代码；
router.beforeEach((to, from, next) => {
//判断是否已登录
if (!getToken() && to.name !== 'login') {
//跳转到登录页
next({ path: '/login' })
} else {
next()
}
})
06.登录/登出
登录
-
先安装插件
js-base64；npm i js-base64 -
或 有的可以使用插件
js-md5；npm i js-md5 -
在登录页引入；
import { encode } from 'js-base64'; // 或 import md5 from 'js-md5' -
调
src/store/user.js异步方法user/login。- 代码 中的
inputName、inputPw和form等参数根据当前页的设置而定； - 代码 11 行，路由有可能是
/login； - 如果登录比较严，如有验证码、30分钟未操作要登出。可参考中山项目；
- 代码 中的
commit () {
if (this.inputName.trim() == '' || this.inputPw.trim() == '') {
this.$message({ type: 'error', message: '请输入用户名密码或验证码!' })
return
}
let form = {
"user": this.inputName,
"pwd": md5(this.inputPw),
"againPwd": md5(this.inputPw),
"needPhoneAuth": false,
"needEmailAuth": false
}
this.$store.dispatch('user/login', { form, axios: this.$axios }).then(data => {
this.$router.push('/');
}).catch((error) => {
console.error('登录失败', error);
this.$message({ type: 'error', message: '登录失败' })
})
}
登出
this.$store.dispatch('user/logout');
07.TopHeader
进入主页，显示用户名可设置计算属性 userName。参考第三篇《03用户及切换列表》
computed: {
userName() {
return this.$store.state.user.name
}
}