vue未登录或登录失效重定向到登录页，登录后再回到登录前的
页⾯
实现思路：
javascript登录注册界面2.登录页⾯，调⽤登录接⼝成功后，给cookie中存⼊⽤户信息（我这⾥是存uuid和sessionid相关内容）
4. main.js中使⽤router.beforeEach，步骤1设置的需登录才能访问的页⾯中，通过判断cookie中是否有⽤户的uuid和sessionid信息，确定⽤户是否已登录（未登录时uuid信息肯定不存在，但登录失效时uuid是存在的，所以要在步骤3中通过判断code值，清除uuid新增）。当⽤户未登录时跳转到登录页，并将当前页⾯的重定向路径带到登录页⾯地址中
2.main.js判断⽤户是否已登录（我⽤的cookie存储的⽤户信息，存储⽅法在auth.js⾥。）
import Vue from 'vue'
import * as auth from '@/utils/auth'
//判断是否登录
router.beforeEach(function (to, from, next) {
if (dLogin) {
//从cookie中获取⽤户信息，判断是否已登录
if (AdminInfo().userUuid) {
next(); //表⽰已经登录
} else {
//未登录
//next可以传递⼀个路由对象作为参数表⽰需要跳转到的页⾯
next({
name: "login",
query: {redirect: direct} //登录后再跳回此页⾯时要做的配置
});
}
} else {
//表⽰不需要登录
next(); //继续往后⾛
}
});
3.auth.js⾥代码，重点部分标红
import Cookies from 'js-cookie'
const TokenKey = 'Admin-Token'
const rolesName = "adminRoles"
const adminInfo = "adminInfo"
// 存储数据localStorage（数组对象格式）
export function setStorageObj(key,obj) {
var str = JSON.stringify(obj);
return localStorage.setItem(key,str);
}
//获取数据（数组对象格式）
export function getStorageObj(key) {
return JSON.Item(key));
}
//存储数据（字符串）
export function setStorage(key,data) {
return localStorage.setItem(key,data);
}
//获取数据（字符串）
export function getStorage(key) {
Item(key)
}
//清除数据（所有格式）
export function removeStorage(key) {
veItem(key);
}
//存储token
export function getToken() {
(TokenKey)
}
export function setToken(token) {
return Cookies.set(TokenKey, token)
}
export function removeToken() {
ve(TokenKey)
}
//存储⾓⾊
export function getAdminRoles() {
const roles = (rolesName)
if(roles){
console.log(roles)
return JSON.parse(roles)
}
return ''
}
export function setAdminRoles(roles) {
return Cookies.set(rolesName, JSON.stringify(roles))
}
//获取⽤户信息
export function getAdminInfo() {
console.log('获取⽤户信息')
const admin = (adminInfo)
if(admin){
return JSON.parse(admin)
}
return ''
}
//存储⽤户信息
export function setAdminInfo(admin) {
return Cookies.set(adminInfo, JSON.stringify(admin))
}
//移除⽤户信息
export function removeAdminInfo() {
ve(adminInfo)
}
4.login.vue页⾯
methods: {
/
/登录
login(formName){
this.$refs[formName].validate((valid) => {
if (valid) {
console.log('登录',this.form)
this.$store.dispatch('user/getUserLogin',this.form).then(() => {
this.$router.push({ path: direct || '/' })
}).catch(() => {
this.loading = false
})
} else {
console.log('error submit!!');
return false;
}
});
}
}
5.vuex（调⽤登录接⼝成功后，存储⽤户信息）
6.vuex登出
7.请求拦截
import axios from 'axios'
import { MessageBox, Message} from 'element-ui'
import store from '@/store'
import ElementUI from 'element-ui'
import QS from 'qs'
import * as auth from '@/utils/auth'
// import router from '@/router'
// const hostUrl = '192.168.0.189:8888'
// create an axios instance
const service = ate({
// baseURL: hostUrl,
timeout: 50000 // request timeout
})
/
/请求头配置
service.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'; // request interceptor
quest.use(
config => {
//给请求头添加内容的话，从这⾥配置
// if (ken) {
// config.headers['Authorization'] = getToken()
// }
return config
},
error => {
console.log(error) // for debug
ject(error)
}
)
// response interceptor
sponse.use(
response => {
//未登录、登录过期code==1000
if(de == 1000){
store.dispatch('user/logout').then(() => {
})
}
//其他错误，根据接⼝返回数据的规律调整
if(de != 200 && (de != 1000)){
ElementUI.Message({
type:'error',
message:ssage
})
ject('error')
}
solve(response.data)
},
error => {
console.log('error',error);
Message({
message: '服务器内部错误',
type: 'error',
duration: 3 * 1000
})
ject(error)
}
)
class http {
static async getPage(url, params){
(url, { params: params })
}
static async post(url, params){
return service.post(url, QS.stringify(params))
}
static async postItem(url, params){
if(!params){
params = {};
}
/
/ params['userUuid']='9E396DE798B240FA8D2162BFE6AC494C'; // params['sessionId']='16e413064c97466c9bef6d9f9e69c5aa';
// 获取userUuid和sessionId
params['userUuid'] = AdminInfo().userUuid;
params['sessionId'] = AdminInfo().sessionId;
return service.post(url, params)
}
static async postNew(url, params){
return service.post(url, params)
}
}
export default http
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论