在permiss.js中配置路由拦截,路由的前置操作
router.beforeEach(async (to, from, next) => {})
to.path:拿取到当前将要跳转的路由
next():直接跳到To.path的路由
next({ path: '/' }):调到当先系统的指定路由
windows.location.href="/url" 当前页面打开URL页面。
windows.location.href:后面没有等于,拿取到当前页面完整的URL,
this.$route.query.redirectURL:拿取到当前query参数中redirectURL的值
逻辑如下
1、判断cookie中是否存在token值,如果存在,则再效验cookie中是否存在用户信息,否则跳转到
登录地址?redirectURL=“当前全路径的地址”
2、如果不存在cookie值,则如下,效验路由白名单,如果存在也能访问,否则和上面一样
if (whiteList.indexOf(to.path) !== -1) {
// in the free login whitelist, go directly
next()
}
3、大致的核心如下
import { PcCookie, Key } from '@/utils/cookie'
NProgress.configure({ showSpinner: false }) // NProgress Configuration
// 路由白名单,不需要登录的路由集合
const whiteList = ['/login']
// 路由的前置操作
router.beforeEach(async (to, from, next) => {
// start progress bar
NProgress.start()
// set page title
document.title = getPageTitle(to.meta.title)
// 拿取到cookie
// const hasToken = getToken()
// 从Cookie中获取访问令牌
const hasToken = PcCookie.get(Key.accessTokenKey)
//
// 如果有
if (hasToken) {
if (to.path === '/login') {
// if is logged in, redirect to the home page
next({ path: '/' })
NProgress.done()
} else {
// const hasGetUserInfo = store.getters.name
// 从cookie中获取用户信息,不用从store中获取
const hasGetUserInfo = PcCookie.get(Key.accessTokenKey)
if (hasGetUserInfo) {
// 跳转到目标路由
next()
} else {
// 没有用户信息,则跳转到登录页面,并带上本地地址
window.location.href = `//localhost:7000?redirectURL=${window.location.href}`
}
}
}
// 如果没有
else {
// 判断路由是否在白名单中
if (whiteList.indexOf(to.path) !== -1) {
// in the free login whitelist, go directly
next()
} else {
// other pages that do not have permission to access are redirected to the login page.
// next(`/login?redirect=${to.path}`)
window.location.href = `${process.env.VUE_APP_AUTH_CENTER_URL}?redirectURL=${window.location.href}`
NProgress.done()
}
}
})
4、跳转到登录页面
window.location.href = `${process.env.VUE_APP_AUTH_CENTER_URL}?redirectURL=${window.location.href}`
因为 vue脚手架支持两个文件.env.development 和.env.production,里面可以配置全局参数
采用proccess.env.参数名称的方法获取全局配置的静态参数
process.env.参数名称
如我的.env.development 配置如下
# just a flag
ENV = 'development'
# base api
VUE_APP_BASE_API = '/dev-api'
# 开发环境,认证中心地址,需要以 `VUE_APP_` 开头
VUE_APP_AUTH_CENTER_URL = '//localhost:7000'
# 开发环境,认证信息保存在哪个域名下。需要以 `VUE_APP_` 开头。
VUE_APP_AUTH_DOMAIN = 'localhost'
关于文件名:必须以如下方式命名,不要乱起名,也无需专门手动控制加载哪个文件
.env 全局默认配置文件,不论什么环境都会加载合并
.env.development 开发环境下的配置文件
.env.production 生产环境下的配置文件
关于内容
注意:属性名必须以VUE_APP_开头,比如VUE_APP_XXX
cookie.js工具
cookie.js工具用于保存,和拿取cooke
import Cookies from 'js-cookie'
// Cookie的key值
export const Key = {
accessTokenKey: 'accessToken', // 访问令牌在cookie的key值
refreshTokenKey: 'refreshToken', // 刷新令牌在cookie的key值
userInfoKey: 'userInfo'
}
class CookieClass {
constructor() {
this.domain = process.env.VUE_APP_COOKIE_DOMAIN // 域名
this.expireTime = 15 // 15 天
}
set(key, value, expires, path = '/') {
CookieClass.checkKey(key);
console.log("打印的存储的值为",value)
Cookies.set(key, value, {expires: expires || this.expireTime, path: path, domain: this.domain})
}
get(key) {
CookieClass.checkKey(key)
return Cookies.get(key)
}
remove(key, path = '/') {
CookieClass.checkKey(key)
Cookies.remove(key, {path: path, domain: this.domain})
}
getAll() {
Cookies.get();
}
static checkKey(key) {
if (!key) {
throw new Error('没有找到key。');
}
if (typeof key === 'object') {
throw new Error('key不能是一个对象。');
}
}
}
// 导出
export const PcCookie = new CookieClass()