第一种方法
在路由里面添加标识符 isAdmin: true,
和服务器返回是否是管理员
联合判断
//看vuex里面的用户信息,是否是管理员,是管理员就全部是true
//不是管理员,看当前路由信息,的meta标签 判断是否是管理员
//是就显示,不是就不显示
<el-main
:style="{ background: 'gray' }"
v-show="
this.$store.state.user.user.isAdmin || !this.$route.meta.isAdmin
"
>
<router-view></router-view>
</el-main>
第二种方法
就是添加全局路由守卫判断,是否是管理员,才有权限进去某个路由
整体流程
Login 组件
登录成功后做本地存储和store存储,并进行跳转。
登陆代码
async handleLogin(e) {
e.preventDefault();
//获取登录表单值
let parmas = {
username: this.model.username,
passwold: this.model.passwold
};
//发送登录异步请求,获取结果集
const res = await this.$http.get("/api/login", parmas);
const { code, token, massage } = res.data;
//code=='0'表示登录成功,进行本地存储和store存储 并进行跳转。
//else 弹出错误提示
if (code == "0") {
this.$store.commit("setToken", res.data.token);
localStorage.setItem("token", token);
//如果是由需要鉴权的页面跳转到登录页面 则redirect=
// this.$route.query.redirect,
// 如果是直接点击登录跳转到登录页面,则redirect= '/'
const redirect = this.$route.query.redirect || "/";
this.$router.push(redirect);
} else {
const toast = this.$createToast({
time: 2000,
txt: massage || "登录失败",
type: "error"
});
toast.show();
}
}
routes[]里用 mate.auth来标识是否需要鉴权。
router.beforeEach做个全局路由守卫,
根据是否需要鉴权以及是否已经登录来进行不同操作。
axios
axios.interceptors.request.use拦截axios所有http请求,
如果存在token,则放入请求头。
axios.interceptors.response.use
拦截的axios的响应,如果token以及失效,
则清除本地缓存和store存储并跳转到登录页面。
// 拦截axios所有http请求,预先放入token请求头
axios.interceptors.request.use(config => {
if (store.state.token) {
// 若存在token,则放入请求头
config.headers.token = store.state.token;
}
return config;
});
// 响应拦截器,提前预处理响应
axios.interceptors.response.use(
response => {
// 如果code是-1,说明用户已注销或者token已过期
// 此时需要重新登录,并且还要清除本地缓存信息和store数据
if (response.status == 200) {
const data = response.data;
if (data.code == -1) {
logoutFun()
}
}
return response;
},
err => {
if (err.response.status === 401) { // 未授权
logoutFun()
}
}
);
function logoutFun() {
// 清空本地缓存的token和store里的token
store.commit("setToken", "");
localStorage.removeItem("token");
// 跳转至登录页,并携带用户退出时或token失效时的页面路由,
//方便登录后直接跳转到此页面。
router.push({
path: "/login",
query: {
redirect: router.currentRoute.path
}
});
}
服务端也需要做请求处理的中间件。如果请求不是req.path不是’/api/login’并且没有携带token,则返回错误状态码401(错误状态码前后端约定好)。我们在vue.config.js里模拟后台接口’/api/login’
import axios from "axios";
import store from "./store";
import router from "./router";
app.use((req, res, next) => {
//只对api开头的请求做拦截处理
if (/^\/api/.test(req.path)) {
if (req.path == '/api/login' || req.headers.token) {
next();
} else {
//设置错误状态码为401
res.sendStatus('401')
next();
}
} else {
next();
}
})