在登录组件登录函数
methods: {
userLogin () {
this.axios({
method: 'post',
url: 'userLogin',
data: this.loginData
}).then(res => {
console.log('登录成功')
// 登录成功存储用户信息到本地存储，用户信息包含token验证字段
// Setitem为封装localStorage本地存储
Setitem('userData', JSON.stringify(data.data))
// ...
}).catch(data => {
// 登录失败处理
})
}
}
一般情况，在 main.js 中做请求拦截处理
// 通过环境设置相应请求路径
if (process.env.NODE_ENV == 'development') {
axios.defaults.baseURL = '/api';
} else if (process.env.NODE_ENV == 'debug') {
axios.defaults.baseURL = 'xxx';
} else if (process.env.NODE_ENV == 'production') {
axios.defaults.baseURL = 'xxx';
}
// 请求拦截
axios.interceptors.request.use((config) => {
// 这里获取登录成功种植的token赋予axios
const userData= Getitem('userData')
if (userData && userData !== '{}') {
config.headers.Authorization = `Bearer ${JSON.parse(userData).token}`
} else {
Removeitem('userData')
}
return config
})
路由钩子函数做拦截处理
// ...
let router = new Router({
routes
})
router.beforeEach((to, from, next) => {
let userData = Getitem('userData')
if (userData) {
userData = JSON.parse(userData )
} else {
// 登录后没有userData跳回到登录页
localStorage.clear()
next('/login')
return
}
if (userData.token) {
// 登录后输入非登录页面或者'/'的导航到对应用户首页
if (to.path === '/login' || to.path === '/forgetpass' || to.path === '/') {
next('/home')
} else {
// 如果是注册页退出登录进入注册页
if (to.path === '/register') {
localStorage.clear()
next()
}
}
} else {
// 没有token进入登陆注册忘记密码页正常，否则拦截到登录页
if (to.path === '/forgetpass' || to.path === '/login' || to.path === '/register') {
next()
} else {
next('/login')
}
}
})
当然登录成功用户信息（token）也可以通过 localStorage 存储到vuex中，像这样
state: {
// 存储token
token: GetItem('userData') ? JSON.parse(GetItem('userData')).token : ''
},
在需要的地方便可通过vuex方法获取
